position absolute span jumps location on focus in firefox

I have a text input with a label moving out of the way when you write in it. For some reason it behaves weirdly in Firefox.

I have a position absolute <span> inside position relative <label>.
In chrome the span appears in point-y. In firefox the span appears at a lower point, but moves to point-y after you interact with it.

For some the bug didn’t reproduce when I used code snippet, so here is a codepen link showing a simplified version of the problem.

I’ve noticied if I remove the viewport’s max-width the problem goes away. But unfortunately, I do need it.

Anyone knows what’s causing this?
Could really use your help.

You need to sign in to view this answers