Build it

Spread the sidebar groups from top to bottom

EasyDistributing space

Three nav groups of different heights bunched at the top of a 600px sidebar. align-content: space-between was the obvious guess and it did precisely nothing.

.sidebar is a flex column. Put the first group against the top edge, the last against the bottom, and split the leftover space equally between the two gaps.

Hint

It is the same keyword as the footer drill. Which PROPERTY carries it, now that the main axis runs downwards?

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.

<aside class="sidebar"><div class="group g1"></div><div class="group g2"></div><div class="group g3"></div></aside>

*, *::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; }
.sidebar { width: 220px; height: 600px; background: #16161d; display: flex; flex-direction: column; }
.group { width: 220px; background: #2a2a36; }
.g1 { height: 120px; }
.g2 { height: 90px; }
.g3 { height: 150px; }