title: How to align mat-button with mat-input?
body: <p>How can I get these two items to align properly? I am trying to get them perfectly aligned but adjusting the button height just makes the bottom have get further away from the bottom of the search input. I think its because the center of them are not aligned so adjusting the height isn't really the correct solution.
    <a href="https://i.stack.imgur.com/dhCar.png" rel="noreferrer"><img src="https://i.stack.imgur.com/dhCar.png" alt="enter image description here"></a></p>
  
  <p>Here's the HTML</p>
  
  <pre><code>&lt;!-- Search Box and Button--&gt;
      &lt;p&gt;Search by company name:&lt;/p&gt;
      &lt;mat-form-field appearance="outline"&gt; 
          &lt;mat-label&gt;Search&lt;/mat-label&gt;
          &lt;input matInput placeholder="Search"&gt;
      &lt;/mat-form-field&gt;
  
      &lt;button mat-stroked-button color="primary"&gt;Search&lt;/button&gt;
  </code></pre>
  
  <p>Here's the SCSS:</p>
  
  <pre><code>mat-form-field.mat-form-field {
      font-size: 12px;
      width: 300px;
    }
  
    button.mat-stroked-button {
      font-size: 14px;
      height: 42px;
      margin: 10px;
    }
  </code></pre>