Creating equal-height columns with CSS is sometimes a daunting task. There are a few different ways to approach this, but none of them are perfect. In this example, we'll take a look at a way to create equal-height columns with CSS Flexbox.
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel urna mattis, pulvinar nunc quis, ultricies lacus. Fusce vel sem molestie, auctor est quis, tincidunt arcu. Donec sagittis dolor dolor, ut ultrices ligula sagittis tincidunt. Ut sem massa, finibus at scelerisque at, finibus non mauris. Morbi porttitor cursus augue vel tristique. Cras vel ante tortor. Mauris et aliquet ante.
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel urna mattis, pulvinar nunc quis, ultric.
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel urna mattis, pulvinar nunc quis, ultricies lacus. Fusce vel sem molestie, auctor est quis, tincidunt arcu. Donec sagittis dolor dolor, ut ultrices ligula sagittis tincidunt. Ut sem massa, finibus at scelerisque at, finibu.
<div class="container">
<div class="col">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel urna mattis, pulvinar nunc quis, ultricies lacus. Fusce vel sem molestie, auctor est quis, tincidunt arcu. Donec sagittis dolor dolor, ut ultrices ligula sagittis tincidunt. Ut sem massa, finibus at scelerisque at, finibus non mauris. Morbi porttitor cursus augue vel tristique. Cras vel ante tortor. Mauris et aliquet ante.</p>
</div>
<div class="col">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel urna mattis, pulvinar nunc quis, ultric.</p>
</div>
<div class="col">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel urna mattis, pulvinar nunc quis, ultricies lacus. Fusce vel sem molestie, auctor est quis, tincidunt arcu. Donec sagittis dolor dolor, ut ultrices ligula sagittis tincidunt. Ut sem massa, finibus at scelerisque at, finibu.</p>
</div>
</div>
.container {
margin: 1em;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.col {
background: #f3f5f8;
padding: 1em;
margin: .5em;
flex: 1;
}
