Make side by side divs the same height and evenly distributing the space using CSS Flex box
I’m sure you will come across this situations many times in your coding journey where you have divs next to each other that need to be the same height to look aesthetically pleasing but the size of the content differs.
I come across this a lot on category pages for online shopping where there is a container that has a product image, product name, and price. Sometimes product names, or prices might span 2 lines for one product and not the other. I find the nicest way to fix this is by using flex.
Flex is generally used to put thing side by side on the horizontal axis, but you can use flex-direction: column; to flex things vertically too.
See my code pen below for an example. By using:flex-direction: column; and justify-content: space-between; we have a really nice tidy solution that add space in right where we want it so that the top and the bottom of the containers are still aligned.
Happy Coding! ⌨️😃
