Build it

Flip your own chat messages to the right

EasyMain axis vs cross axis

Every message renders avatar-then-bubble on the left. Your own messages need bubble-then-avatar on the right, and the template that emits them is shared with everyone else's.

.row is avatar first, bubble second in the markup, and it has to stay that way. Render the bubble on the left of the avatar, with the pair pushed against the right-hand end of the row.

Hint

Reversing a row moves two things, and the order is only one of them. What is the other, and is it wanted here?

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="row"><div class="avatar"></div><div class="bubble"></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; }
.row { width: 560px; height: 72px; background: #16161d; display: flex; align-items: center; gap: 10px; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: #7cd4a0; }
.bubble { width: 220px; height: 48px; border-radius: 12px; background: #2a2a36; }