F flexr.dev

Layout Recipe

Make Cards Equal Height with Tailwind Flexbox

Equal-height cards are flexbox's default behavior, and Tailwind exposes it through 'items-stretch' (which is applied automatically when you use 'flex'). Every direct child stretches on the cross axis to match the tallest sibling in its row — no JavaScript height matching, no fixed heights. If your cards stopped matching heights, check whether an 'items-start' or 'items-center' utility crept onto the parent.

The playground below is pre-configured with this exact layout — tweak any control to explore, then copy the Tailwind or vanilla CSS from the exporter.

Live Preview

Current Layout:

Equal height is flexbox's default

Put a row of cards in a flex container and they already match heights — items-stretch is the default, so every card stretches on the cross axis to the height of the tallest sibling. No JavaScript, no fixed heights, no table hacks.

Tailwind 
<div class="flex gap-6">
  <div class="flex-1 rounded-lg border p-4">Short card</div>
  <div class="flex-1 rounded-lg border p-4">A much taller card with more text inside</div>
</div>
Vanilla CSS 
.cards {
  display: flex;
  align-items: stretch;
  gap: 1.5rem;
}

When cards stop matching heights

If a card row suddenly has uneven heights, an alignment utility usually crept onto the parent. items-start, items-center, or items-end each override the stretch and size cards to their own content. Remove them, or set items-stretch explicitly, to restore matching heights.

Pushing a button to the bottom of every card

Equal-height cards look best when their footers line up. Make each card a column with flex flex-col, then add mt-auto to the button or footer so it sinks to the bottom regardless of how much text sits above it.

Tailwind 
<div class="flex flex-1 flex-col rounded-lg border p-4">
  <p>Card body of any length...</p>
  <button class="mt-auto">Action</button>
</div>

Common mistakes

Setting a fixed h-* on cards. It breaks the moment one card's content overflows; let stretch do the work instead.

Adding items-center or items-start to the row. Either one cancels the equal-height stretch.

Forgetting flex-1. Without it, cards size to their content width and look uneven across the row.

Frequently asked questions

How do I make all cards the same height in Tailwind?
Place them in a flex row and leave the default items-stretch in place; every card stretches to match the tallest one automatically.
Why are my Tailwind cards different heights?
An items-start, items-center, or items-end utility on the parent is overriding the default stretch. Remove it or set items-stretch.
How do I align a button to the bottom of each card?
Make the card flex flex-col and add mt-auto to the button so it drops to the bottom of the card.

Popular Layout Guides