title: SVG inside flex misaligned when wrapped in div
body: <p>I want an SVG icon of unknown size center aligned to the left of some text. I preferably want to use flex.</p>
  
  <p>This is the CSS for the SVG and text container:</p>
  
  <pre><code>.container {
      background-color: pink;
      display: flex;
      align-items: center;
      margin: 10px;
      width: 200px;
  }
  </code></pre>
  
  <hr>
  
  <p>This works fine:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;svg style="width:24px;height:24px" viewBox="0 0 24 24"&gt;
      &lt;rect width="24" height="24"/&gt;
    &lt;/svg&gt;
    &lt;div&gt;ALIGNED ICON&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>However, when I wrap the SVG in another <code>div</code>, the height of that <code>div</code> becomes unnecessarily big, resulting in a misalignment of the SVG and text:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div&gt;
          &lt;svg style="width:24px;height:24px" viewBox="0 0 24 24"&gt;
              &lt;rect width="24" height="24"/&gt;
          &lt;/svg&gt;
      &lt;/div&gt;
      &lt;div&gt;MISALIGNED ICON&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is a link to <a href="https://codepen.io/anon/pen/JxxxNE" rel="nofollow noreferrer">CodePen</a></p>
  
  <hr>
  
  <p>In reality, this is a React project and I use external SVG components that I don't have control over or know the size of. I can therefore not apply any styles directly to the SVG element, neither set the wrapper <code>div</code> height to match that of the SVG.</p>
  
  <p><strong>How do I align the SVG and text when wrapping the SVG in another div?</strong></p>