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:
display: flex;
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.

See the Pen
Same Height Columns with Flexbox by Gulamabbas Mawji (@gmawji)
on CodePen.