title: Remove space between spans on word wrap
body: <p>I have a text and an icon that I want to show together in a div. The icon should always be right next to the text. When there is not enough space for the text, the text should wrap automatically, but the icon should stay next to the text.</p>
  <p>I have tried a few solutions but I always run into the problem that as soon as the text wraps, the span will be much wider than it's content, creating a gap between text and icon:</p>
  <p><a href="https://i.stack.imgur.com/K2H4M.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/K2H4M.png" alt="weird space" /></a></p>
  <p>What I want to achieve:</p>
  <p><a href="https://i.stack.imgur.com/W1oO0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/W1oO0.png" alt="![enter image description here" /></a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="width: 200px;"&gt;
    &lt;div style="display: flex;"&gt;
        &lt;span&gt;Erforderliche Gesamtsumme&lt;/span&gt;
        &lt;span&gt;&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Any idea how this can be solved?
  I need a HTML/CSS solution, I don't want to solve this with JS.
  I have tried a million things (CSS Grid, display: inline-block, all possible flex properties, ...) and different answers on SO, but nothing worked so far.</p>