I am playing around with flexbox and aligning stuff. Here is a minimum example which uses display:inline-flex. I expect those two boxes lined up perfectly in a row, but the inlined flex-container actually does not and I canĀ“t figure out why. Please have a look at this pen.
Somehow flex-modules like to be within flex-containers, and there is this white-space thing that comes with display: inline-block which might be related. Anyway, forked your demo with an added flex-wrapper, which makes them line up.
See the following answer by @paulie_d