title: border of two divs side-by-side with `display: inline-block`
body: <p>I have managed to align two <code>div</code> elements side-by-side using <code>display: inline-block</code> with the following code (<a href="https://jsfiddle.net/2udkrbfy/" rel="nofollow noreferrer">jsFiddle</a>):</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;style&gt;
       #a {
         border: 10px solid red;
         width: 200px;
         height: 200px;
         background: black;
         font-size: 0;
       }
       #a1 {
         font-size: 16px;
         border: 10px solid green;
         width: 100px;
         height: 200px;
         background: white;
         box-sizing: border-box;
         display: inline-block;
       }
       #a2 {
         font-size: 16px;
         border:  10px solid green;
         width: 100px;
         height: 200px;
         background: white;
         box-sizing: border-box;
         display: inline-block;       
       }     
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id='a'&gt;
        &lt;div id='apadding'&gt;
          &lt;div id='a1'&gt;a1&lt;/div&gt;
          &lt;div id='a2'&gt;a2&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The above yields the following desired result:</p>
  
  <p><a href="https://i.stack.imgur.com/tOGAr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tOGAr.png" alt="enter image description here"></a></p>
  
  <p>I can change the borders of the two <code>div</code> elements and (as long as they both have the same border) the result is the expected one.</p>
  
  <p>However, when I change the border of the second <code>div</code> only, to e.g. 20 pixels this is what I get (<a href="https://jsfiddle.net/2udkrbfy/2/" rel="nofollow noreferrer">jsFiddle</a>):</p>
  
  <p><a href="https://i.stack.imgur.com/BTMr1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BTMr1.png" alt="enter image description here"></a></p>
  
  <p>Given that the <code>box-sizing</code> of both internal <code>div</code> elements is set to <code>border-box</code> I was expecting any change in the border width to be absorbed by that div's box and to not disrupt the alignment in any way. What's more puzzling is that the second <code>div</code> (whose border was changed) is the one that ends up displayed correctly while the first <code>div</code> is somehow pushed off its place.</p>
  
  <p>What am I missing?</p>