In my snippet below I have two buttons next to each other where I would expect them to be aligned with my current CSS. They are both inline-flex items which means they should appear inline (which they kind of do) while also working as a flexbox.
However, for some unexplainable reason, they are not properly aligned. They have equal height, changing the padding dont help, and there are no other properties as far as I can tell which should change the positioning of the elements, yet for some reason one of them is being pushed up and the other pushed down.
I know I can fix this by adding display flex to their container, however, I would like to figure out why this is happening and try to find a solution without their container being a flexbox because this makes no sense to me.
button {
display: inline-flex;
align-items: center;
justify-content: center;
height: 2.5rem;
}
svg {
height: 1rem;
}<div>
<button>
<span>Some Text</span>
</button>
<button>
<svg viewBox="0 0 320 512"><path d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z"/></svg>
</button>
</div>The content inside your buttons is different (text & svg) and with inline-flex the elements are aligned based on their content. Adding vertical-align: middle; to your button should fix the alignment issues you're facing.