Build it

Let one card opt out of the stretching

EasyAlignment

All three cards stretch, which is right for two of them. The featured card is meant to be a compact box at the top of the row, and pulling it out into its own wrapper broke the equal thirds.

Keep .t1 and .t3 filling the row's 340px. Let .featured shrink to the height its own content needs — 180px — and sit against the top edge. It has to follow its content if that content changes.

Hint

Every cross-axis property on the container has a per-item twin. What is it called?

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: stretch; gap: 16px; }
.tier { flex: 1; padding: 20px; background: #16161d; }
.body { background: #2a2a36; }
.t1 .body { height: 100px; }
.t2 .body { height: 140px; }
.t3 .body { height: 120px; }