title: Vertical alignment for two inline-block elements not working as expected
body: <p>In the code below, why do I need to set <code>vertical-align: top</code> to both elements to close the gap between them? If the gap occurs on the first element only, can't I just set that to <code>vertical-align: top</code> to close the gap?</p>
  <p>Here is what occurred if I assign vertical-align property to only <code>.test</code> :</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;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;style&gt;
         body{
             width: 100vw;
             height: 100vh;
             margin: 0;
             background-color: black;
         }
  
          .test {
              vertical-align: top;
              display: inline-block;
              width: 10%;
              height: 100px;
              background-color: lightblue;
          }
  
  
          hr{
              display: inline-block;
              width: 100%;
              border: thick solid lightgreen;
              margin: 0;
          }
  
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class = "test"&gt;&lt;/div&gt;&lt;hr/&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>This is what happened when I assign vertical-align to <em>both</em> elements:</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;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;style&gt;
         body{
             width: 100vw;
             height: 100vh;
             margin: 0;
             background-color: black;
         }
  
          .test {
              vertical-align: top;
              display: inline-block;
              width: 10%;
              height: 100px;
              background-color: lightblue;
          }
  
  
          hr{
              display: inline-block;
              width: 100%;
              border: thick solid lightgreen;
              margin: 0;
              vertical-align: top;
          }
  
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class = "test"&gt;&lt;/div&gt;&lt;hr/&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>