Teaching step

justify-content is the main axis, align-items is the cross axis

EasyAlignmentF09

align-items: flex-end was supposed to push the buttons to the right. It pushed them to the bottom, and adding justify-content on top moved them sideways as well.

Both pills have to end up packed against the far end of the bar, touching each other, and sitting on the bottom edge. Two properties. One of them handles one axis and one handles the other, and neither will do the other's job. The names are unhelpful and always have been. Ignore what they sound like and ask which axis each one belongs to.

Hint

This bar is a default `row`. Which way is its main axis pointing, and which of the two properties is the main-axis one?

Live preview800×400

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="bar"><div class="pill one"></div><div class="pill two"></div></div>

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: #0b0b0f; }
.bar { width: 560px; height: 200px; background: #16161d; }
.pill { width: 120px; height: 40px; background: #ffd166; border-radius: 20px; }
.two { background: #7bdff2; }