Build it

Render Cancel before Save without touching the markup

EasyOrder

Save is written first in the markup so it is the first thing a screen reader and the Tab key reach. Visually it has to be the button on the right, and moving it in the HTML would move it in the tab order too.

The DOM order is Save then Cancel. Make the row render Cancel on the left and Save on the right, still packed against the trailing edge, without reordering the markup.

Hint

Flexbox lays items out in document order — unless something tells it a different sequence. What is that something, and what does it NOT change?

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="form-actions"><div class="btn save"></div><div class="btn cancel"></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; }
.form-actions { width: 400px; height: 56px; background: #16161d; display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.btn { height: 36px; }
.save { width: 104px; background: #7cd4a0; }
.cancel { width: 96px; background: #2a2a36; }