Build it

Centre the avatar while everything beside it stretches

EasyAlignment

A comment row: the body panel fills the row's height, and the avatar sits at the top of it. It should be vertically centred, and align-items: center centred it by taking the body's height away.

Keep .body filling the full 132px of .comment and centre .avatar vertically beside it. Both must hold if the row grows.

Hint

The same shape as the badge drill with a different keyword. Which one, and on which element?

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="comment"><div class="avatar"></div><div class="body"></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; }
.comment { width: 520px; height: 132px; background: #16161d; display: flex; align-items: stretch; gap: 12px; }
.avatar { width: 48px; height: 48px; border-radius: 50%; background: #7cd4a0; }
.body { width: 460px; background: #2a2a36; }