Build it

Give the three pricing tiers the same height

EasyAlignment

Three pricing cards with different amounts of copy in them, so they are three different heights and the bottom of the row looks like a city skyline.

Make all three cards in .tiers fill the row's full 340px height. It has to keep working when the row gets taller, and without anyone measuring the copy.

Hint

This is the cross-axis default you have been switching OFF in other drills. What is it, and what did the fixture set instead?

Live preview1000×700

Your stylesheet

checked in a real browser, four ways

The fixture — markup and base stylesheet

You cannot change either of these. They are what your selectors have to reach, and they are the same ones the judge renders.

<div class="tiers"><div class="tier t1"><div class="body"></div></div><div class="tier t2 featured"><div class="body"></div></div><div class="tier t3"><div class="body"></div></div></div>

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: #0b0b0f; color: #e8e8ef; font: 16px/1.4 system-ui, -apple-system, sans-serif; }
.tiers { width: 720px; height: 340px; background: #0f0f14; display: flex; align-items: flex-start; gap: 16px; }
.tier { flex: 1; padding: 20px; background: #16161d; }
.body { background: #2a2a36; }
.t1 .body { height: 100px; }
.t2 .body { height: 140px; }
.t3 .body { height: 120px; }