Build it

Float the pinned tag to the front of the list

EasyOrder

Tags render in the order the API returns them. One of them is pinned and has to lead, and re-sorting the array server-side to satisfy a visual rule felt like the wrong place to fix it.

.pinned is the third tag in the markup. Render it first, with .t1, .t2 and .t4 following in their existing order and the whole group packed left with its 8px gaps.

Hint

Every item already has an `order`. What is it, and what happens to an item whose number is lower than everyone else's?

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="tags"><div class="tag t1"></div><div class="tag t2"></div><div class="tag pinned"></div><div class="tag t4"></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; }
.tags { width: 520px; height: 44px; background: #16161d; display: flex; align-items: center; gap: 8px; }
.tag { width: 64px; height: 24px; background: #2a2a36; }
.pinned { width: 96px; background: #ffd166; }