I have the following markup on my page:
<h1 id="some-fragment"><a href="#some-fragment" class="fragment-link"><svg height="16" width="16" viewbox="0 0 24 24" fill="none" stroke="#000" stroke-width="2"><path d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3"></path><line x1="8" y1="12" x2="16" y2="12"></line></svg></a> Header text <code>Ooh, a code block</code></h1>with the following CSS:
/* irrelevant to this, but looks better */a { text-decoration: none}h1 { display: flex; align-items: center;}svg { display: block;}code { padding: 2px 4px; background: #888; border-radius: 4px;}What I want to do is vertically align the icon next to the header text, but when I add display: flex, the code block looks super goofy. It gets crushed against the header text, losing the spacing following "text", and it seems to grow & get vertically off center, compared to the text. No combination of flex-grow: 0 has seemed to have an effect here.
I just want this to look identical to how it was w/out display: flex, but with the icon centered next to it.
Edit: I'm looking for CSS fixes, markup can't be adjusted really. The header text ("Header text " & ) are one item, can't be split up.
