Build it

The same three tiers, now standing on the bottom edge

EasyAlignment

The design changed: the cards should keep the height their content gives them and line up along the BOTTOM of the row instead of filling it. Stretch is doing the opposite of what is wanted now.

Let each card in .tiers keep its natural height — 140, 180 and 160 — and rest all three on the bottom edge of the 340px row. It has to hold when the row gets taller.

Hint

Same fixture, same axis, same property as the first drill in this family. Only the value is different — which one?

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; }