Build it

Push the close button to the far edge of the modal header

EasyDistributing space

The dialog title and its × sit next to each other in the top-left, like the × belongs to the title. It should be over on the right, and the modal has three widths.

.modal-head is already a flex row with 16px of side padding. Put .title against the left edge of the content box and .close against the right, with all the leftover space between them.

Hint

There are two items and one pool of free space. Where can flexbox put that pool?

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="modal-head"><div class="title"></div><div class="close"></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; }
.modal-head { width: 480px; height: 72px; padding: 0 16px; background: #16161d; display: flex; align-items: center; }
.title { width: 180px; height: 40px; background: #2a2a36; }
.close { width: 24px; height: 24px; background: #ff7ab6; }