Align button and button content within a line-CodePudding

I am trying to highlight a section of text and also display a button next to the section. However, I can't get the elements to where I want them, which is vertically centered.

Here is the corresponding CodePen.

As you can see, I'm using the hackJob-class to manually move the button box so that the 'x' is centered within the button, but now the buttons is too high.

What I would have wanted is to find a way to

(automatically) center the button in relation to the other text
(automatically) center the 'x' / SVG in that box

...without worrying about realigning it every time I the dimensions change a bit.

For now, moving the 'x'/SVG down would already help!

I'm sure I'm missing something obvious and would really appreciate some help!

CodePudding user response：

you could add

display: inline-flex;
justify-content: center;

to the .outerWrap class.