Help please alignment works in firefox but not in chrome

In firefox it looks like this:

But in chrome it doesn’t work properly :frowning:
It looks this way instead:

Code:
https://codepen.io/Snippet/pen/RwGeJwX

using display: inline-block seems to improve it, but it causes other problems (top red square)