Build it

Send the destructive button to the far end of the toolbar

EasyDistributing space

Four toolbar buttons, and Delete is the fourth of them, one click away from Duplicate. space-between was the first thing tried and it scattered all four across the bar.

Keep the first three buttons packed together on the left with their 8px gap. Put .danger hard against the right-hand end of .toolbar, with all the free space between it and the group.

Hint

`space-between` shares the free space out among every gap. What if only one gap should get it?

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="btn"></div><div class="btn"></div><div class="btn"></div><div class="btn danger"></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: 600px; height: 56px; background: #16161d; display: flex; align-items: center; gap: 8px; }
.btn { width: 80px; height: 32px; background: #2a2a36; }
.danger { width: 88px; background: #ff7ab6; }