How to vertically align the block following the text?

Question

css

It was necessary to add a badge in h2, which is sometimes displayed.
Added, aligned with flexbox - excellent.
But if the text goes to a new line, then the badge is already moving to the right.
And without flexbox, you can’t align the badge vertically.
Link https://codepen.io/anon/pen/JLMZvp
Is it possible to do this without wrapping the text in front of the badge with a span?

Answer 1

wrap the badge with a div and set line-height and vetical-align:middle