title: Depending on a browser a label has different inner padding within a div
body: <p>I have a container with an icon and a label inside it. I'm using flexbox to align icon and the label to the bottom of the container.</p>
  
  <p>What I noticed, depending on a browser (Chrome and FF, for example), the distance from the bottom of the container to the text in the label is different by around 1px.</p>
  
  <p><a href="https://i.stack.imgur.com/CvUbk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CvUbk.png" alt="enter image description here"></a></p>
  
  <p>I played with line-hight and different layouts of icon+label, but I couldn't get rid of this 1px difference.
  Icon does not play any role in that layout, but I added it, as because of existence of the icon I care about aligning this pixel.</p>
  
  <p><a href="https://jsfiddle.net/eh7jrp6s/6/" rel="nofollow noreferrer">https://jsfiddle.net/eh7jrp6s/6/</a></p>
  
  <pre><code>&lt;div class="container ng-scope"&gt;
    &lt;span class="icon" style="background-image: url(&amp;quot;data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48cGF0aCBkPSJNMTYgMTBINFY3YzAtLjYtLjQtMS0xLTFzLTEgLjQtMSAxdjhjMCAuNi40IDEgMSAxczEtLjQgMS0xdi0zaDEydjNjMCAuNi40IDEgMSAxczEtLjQgMS0xVjdjMC0uNi0uNC0xLTEtMXMtMSAuNC0xIDF2M3oiIGZpbGw9IiMwMGI2ZmYiLz48L3N2Zz4=&amp;quot;);"&gt;
    &lt;/span&gt;
    &lt;span class="label ng-binding"&gt;_________this line is on different level depending on a browser_______&lt;/span&gt;
  &lt;/div&gt;
  
  .container {
      display: flex;
      align-items: flex-end;
      color: $blue;
      cursor: default;
      text-decoration: none;
      border: 1px solid red;
      line-height:18px
    }
      .icon {
        background-size: 2rem 2rem;
        height: 2rem;
        width: 2rem;
        border: 1px solid blue;
        line-height:18px
      }
  
      .label {
        cursor: pointer;
        border: 1px solid green;
        line-height:18px
      }
  </code></pre>
  
  <p>Any idea how I can equalize the distance to the label from the bottom of the container for different browsers?</p>