title: Increase height on angular material 2 moves placeholder
body: <p>I am trying to increase the size of material 2 input control by setting the height property of the input from css</p>
  
  <pre><code>&lt;input mdInput placeholder="Favorite food" class="search-grid-input"&gt;
  
  .search-grid-input {
      height:30px!important;
  }
  </code></pre>
  
  <p>and I get the following on the right part of the image below:</p>
  
  <p><a href="https://i.stack.imgur.com/Opa5u.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Opa5u.png" alt="enter image description here"></a></p>