title: vertical align center input and button in div
body: <p>I have a search setup inside a div but for some reason cannot get it to vertically align center</p>
  
  <p>This is my code -</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="search"&gt;
  &lt;input class="searchfield" type="text" placeholder="Search..." value="" /&gt;&amp;nbsp;&lt;button class="searchbutton"&gt;SEARCH&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.search{
  padding 0 10px;
  font-size:0.8em;
  float:right;
  height:100%;
  display:table;
  vertical-align:middle;
  }
  
  .searchfield{
  display:table-cell;
  }
  
  .searchbutton{
  display:table-cell;
  }
  </code></pre>
  
  <p>what am I doing wrong?</p>