How to align mat-button with mat-input?

Question

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.

Here's the HTML

<!-- Search Box and Button-->
    <p>Search by company name:</p>
    <mat-form-field appearance="outline"> 
        <mat-label>Search</mat-label>
        <input matInput placeholder="Search">
    </mat-form-field>

    <button mat-stroked-button color="primary">Search</button>

Here's the SCSS:

mat-form-field.mat-form-field {
    font-size: 12px;
    width: 300px;
  }

  button.mat-stroked-button {
    font-size: 14px;
    height: 42px;
    margin: 10px;
  }

Questionnaire

Please provide a codesandbox with your code ;) – Mining

Answer 1

To achieve horizontal alignment you need to make some adjustment in markup and use flex properties for perfect alignment. I have added few div as parent but if you want you can assign CSS to actual parent classes of your code. I have added my snippet code below, update HTML and CSS accordingly :

.searchcontainer {
          text-align:center;
          width: 100%;
          max-width: 600px;
          margin: 0 auto;
       }

       .searchcontainer .search-part {
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
       }

      mat-form-field.mat-form-field {
          font-size: 12px;
          width: 300px;
      }

      button.mat-stroked-button {
          font-size: 14px;
          height: 42px;
          margin: 10px;
      }

<div class="searchcontainer">

      <p>Search by company name:</p>

      <div class="search-part">

        <mat-form-field appearance="outline"> 
            <mat-label>Search</mat-label>
            <input matInput placeholder="Search">
        </mat-form-field>

        <button mat-stroked-button color="primary">Search</button>
      </div>

    </div>

Rothko

A shame that they did not provide a way to do it natively. Plus, if you zoom, it won't be beautiful. – Anthropophagite

Hack not a solution angular team stoped listening to developers a long time ago – Connell

Answer 2

<mat-form-field>
  <mat-label>Type Postcode</mat-label>
  <input matInput placeholder="Postcode" formControlName="postCode" required>
  <button matSuffix mat-button (click)=""><mat-icon >search</mat-icon></button>
</mat-form-field>

Kropotkin