How to make equal-height columns
Short answer
In a flex container the items of a row stretch to the height of the tallest one by default:
<style>
.row { display: flex; gap: 12px; }
.row div { flex: 1; padding: 12px; background: lavender; border-radius: 8px; }
</style>
<div class="row">
<div>Short</div>
<div>A much longer text that takes several lines in this column.</div>
<div>Medium text here</div>
</div>The default value align-items: stretch does this, so there is nothing to add. In grid the cells of one row stretch by themselves too.
A button at the bottom of a card
Cards are the same height but the buttons sit at different levels? Make each card a column and push the button down with margin-top: auto:
<style>
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cards article { display: flex; flex-direction: column; padding: 12px; background: whitesmoke; }
.cards button { margin-top: auto; }
</style>
<div class="cards">
<article><p>Basic plan</p><button>Buy</button></article>
<article><p>Pro plan with many extra features listed here</p><button>Buy</button></article>
</div>Common mistake
The heights stop matching if you set align-items: center or another align-self value on the items, or a fixed height. For equal heights keep stretch and do not set a height — let the longest text decide it.
Functions used in this recipe
- align-items — Aligns items across the main axis — vertically in a row.
- flex — A shorthand for how a flex item grows, shrinks and what size it starts from.
- flex-direction — The direction of the main axis of a flex container: items in a row or in a column.