title: Two divs same line: why overflow: hidden; causes vertical offset?
body: <p>I have two divs sitting one next to the other on the same line with <code>display: inline-block;</code> <a href="https://jsfiddle.net/3q0kbv2k/" rel="nofollow noreferrer">https://jsfiddle.net/3q0kbv2k/</a>. When I put <code>overflow: hidden;</code> on the first div, the second is moved down by a small offset.</p>
  
  <p>Html:</p>
  
  <pre><code>&lt;!-- CODE ON ONE LINE ON PURPOSE --&gt;
  &lt;!-- WHITESPACES BREAK LAYOUT --&gt;
  &lt;div class="foo"&gt;foooooooooooooooooooooo&lt;/div&gt;&lt;div class="bar"&gt;&lt;div&gt;bar&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Css:</p>
  
  <pre><code>.foo {
      display: inline-block;
      width: 9%;
      margin-right: 1%;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      background: red;
  }
  
  .bar {
      display: inline-block;
      width: 90%;
      background: yellow;
  }
  </code></pre>
  
  <p>Why is this happening?</p>
  
  <p>I found <a href="https://stackoverflow.com/questions/3789854/overflow-hidden-causing-alignment-issues-in-firefox">this old question</a> that depicts the very same scenario and contains a workaround, but I'm interested in understanding <strong>why</strong> this happens, is it a bug or normal behaviour?</p>