title: buttons in div rendered differently because of text content
body: <p>I have four 100*100px sized buttons in a div. However they are positioned different depending on their text content.</p>
  
  <p>This is the html:</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;Memo demo&lt;/title&gt;
    &lt;style&gt;
      button {
        height: 100px;
        width: 100px;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="buttonHolder"&gt;
      &lt;button type="button" &gt;X&lt;/button&gt;
      &lt;button type="button" &gt;&lt;/button&gt;
      &lt;button type="button" &gt;X&lt;/button&gt;
      &lt;button type="button" &gt;X&lt;/button&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is how it is rendered in Chrome:
  <a href="https://i.stack.imgur.com/pNSyc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pNSyc.png" alt="chrome screenshot"></a></p>
  
  <p>This is how it is rendered on Firefox:
  <a href="https://i.stack.imgur.com/7Fa52.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7Fa52.png" alt="firefox screenshot"></a></p>
  
  <p>What should I do to make them appear aligned?</p>