title: How to equal height of <select> and <button> element with padding
body: <p>I want to make both elements 'select' and 'button' have the same height.</p>
  
  <p><a href="http://jsfiddle.net/dm58q/" rel="nofollow noreferrer"><kbd><strong>JS Fiddle</strong></kbd></a></p>
  
  <hr>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;select&gt;&lt;option&gt;...&lt;/option&gt;&lt;/select&gt;&lt;button&gt;Button&lt;/button&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>* {
      font-size:100%;
  }
  
  select, button {
      border:1px solid gray;
      padding:.4em .6em;
      margin:0;
      //box-sizing:border-box; (did not help...)
  }
  </code></pre>
  
  <hr>
  
  <p><a href="http://jsfiddle.net/dm58q/" rel="nofollow noreferrer"><kbd><strong>JS Fiddle</strong></kbd></a></p>
  
  <p>Right now it looks like this:</p>
  
  <p><img src="https://i.stack.imgur.com/QxN1e.png" alt="enter image description here"></p>
  
  <hr>
  
  <p>But it should look like this:</p>
  
  <p><img src="https://i.stack.imgur.com/blWxA.png" alt="enter image description here"></p>
  
  <hr>
  
  <p><strong>How can I achieve the desired outcome with changing the CSS?</strong></p>