Build it

The two panels are `flex: 1` and one of them is still wider

EasySizing

Both panels have flex: 1. The one holding a long unbroken string is more than twice the width of the other and the row overflows its container. The declaration that gives equal columns is right there and it is not working.

Make both panels in .split exactly 312px, filling the row with its 16px gutter, and keep .left inside .split — even though the token it contains is far wider than 312px.

Hint

`flex: 1` set the basis to zero. Something else is putting a floor under the used width — what is its initial value?

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="split"><div class="col left"><p class="token">sk_live_this_is_filler_for_a_layout_drill_not_a_credential</p></div><div class="col right"><p>ready</p></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; }
.split { width: 640px; height: 160px; background: #0f0f14; display: flex; gap: 16px; }
.col { height: 160px; padding: 12px; background: #16161d; }
.col p { margin: 0; font: 14px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }