Back to basics: Apparently, nested <code> with display: inline-block and overflow: hidden results in weirdness dabblet.com/gist/7bc90a1bd7d…

see the very last sentence of drafts.csswg.org/css2/visude… for why

I think text-top or text-bottom (or, failing that, top or bottom) might be a safer workaround, though, since...

Actually, neither text-top, text-bottom or middle are a good workaround. Notice the parentheses, they're misaligned…

yeah, baseline is the only vertical-align value that truly aligns the same point in the parent and child (in most cases)

Yup, but in this case, baseline is on drugs… So there is no workaround?! :/

Can you avoid 'overflow: hidden'? I can't think of anything else offhand that would be reliable.

Nope, I can't. The width of the <code>s is animated with steps() to simulate typing, so "future" chars need to be hidden.