Same Height Columns using Flexbox
One of the biggest issues I’ve had with CSS was when I made columns of text with borders. Unless all the text was the same length; so that it panned out to the same height, I would end up with un-even, ugly columns.
Enter Flexbox, the best CSS specification you’ll ever need; aside from CSS Grid (we’ll get into that eventually). With Flexbox all you do is set the Flex Items (the children of the flex parent) CSS property to:
This will pad out the content to ensure the items all have the same height. In the below example you can see this by looking for the flex-container (parent) and flex-item (child) CSS classes.