[alex7734]

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) 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

And yes, anything that has to do with baselines is a source of pain and bugs, it sucks.