Build it

Make the documents segment twice the size of the media one

EasySizing

A storage bar with three segments. The legend segment has to stay exactly 120px, and the other two have to split what is left two to one — and every percentage that was tried is right at one window width.

In .usage, keep .other at its 120px and give .docs twice as much of the remaining space as .media. At 600px wide that is 320 and 160.

Hint

Grow factors are shares of something. Of the container, or of what is left after the fixed segment has taken its 120px?

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="usage"><div class="seg docs"></div><div class="seg media"></div><div class="seg other"></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; }
.usage { width: 600px; height: 28px; background: #16161d; display: flex; }
.seg { height: 28px; }
.docs { background: #8ab4ff; }
.media { background: #7cd4a0; }
.other { width: 120px; background: #ffd166; }