Build it

Drop the unread badge to the bottom of the mail row

EasyAlignment

The subject block correctly fills the row's height. The unread badge beside it is stuck at the top, and align-items: flex-end moved the badge down and collapsed the subject block to nothing.

Keep .subject filling the full 96px of .mailrow, and move .badge — which has a height of its own — down to the bottom edge. Both must hold when the row gets taller.

Hint

One item needs to change and the other does not. Which property can say that?

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="mailrow"><div class="subject"></div><div class="badge"></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; }
.mailrow { width: 480px; height: 96px; background: #16161d; display: flex; justify-content: space-between; align-items: stretch; }
.subject { width: 300px; background: #2a2a36; }
.badge { width: 40px; height: 20px; border-radius: 10px; background: #ff7ab6; }