https://www.w3.org/TR/css-flexbox-1/#flex-baselines https://www.w3.org/TR/css-flexbox-1/#flex-baselines first/last main-axis baseline set When the inli

https://www.w3.org/TR/css-flexbox-1/#flex-baselines https://www.w3.org/TR/css-flexbox-1/#flex-baselines first/last main-axis baseline set When the inline axis of the flex container matches its main axis, its baselines are determined as follows: [...] Otherwise, if the flex container has at least one flex item, the flex container’s first/last main-axis baseline set is generated from the alignment baseline of the startmost/endmost flex item. [...] It uses the first flex item (the first child controlled by the flexbox) to set the baseline for the flexbox. (for https://codepen.io/jsteel64/pen/rNrPYNQ https://codepen.io/jsteel64/pen/rNrPYNQ) The first img sets the baseline for the .wrapper, which sets it for the pill, and then two pills are aligned according to their baselines. https://imgur.com/Bt4e6gU https://imgur.com/Bt4e6gU And yes, anything that has to do with baselines is a source of pain and bugs, it sucks.