Build it

Sit the editor tools in the middle of the rail

EasyAlignment

The toolbar rail is 64px tall and the buttons cling to the top of it, so the whole strip reads as top-heavy next to the document beside it.

Centre .tools vertically inside .toolbar, and leave it flush against the left edge where it already is. It must stay centred if the rail gets taller.

Hint

The rail is a row. Which axis is the cross axis when the items run left to right?

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="toolbar"><div class="tools"></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; }
.toolbar { width: 560px; height: 64px; background: #16161d; }
.tools { width: 200px; height: 24px; background: #8ab4ff; }