How to change height in mat-form-field

TLDR: adjust the font-size of the surrounding container.

Longer: The functionality for resizing the form-fields is built into Angular Material so unless you want to change relative proportions in the field, you don't need to get muddy with resizing individual components (see documentation).

The key to adjusting the field size is actually just adjusting the font-size in the surrounding container. Once you do that, everything else will scale with it. e.g.

With container font-size: 12px;

<div style="font-size: 12px">
  
  <mat-form-field appearance="outline">
    <mat-label>Your name</mat-label>
    <input matInput placeholder="Jane Doe">
  </mat-form-field>

  <mat-form-field appearance="outline">
    <mat-label>Your email</mat-label>
    <input matInput placeholder="[email protected]">
  </mat-form-field>

</div>

Resultant form:

With container font-size: 18px;

<div style="font-size: 18px">
  
  <mat-form-field...

</div>

Resultant form:

NB

This isn't a solution for you if you're not happy with the ratio of padding inside the forms. However that's a different question to how you simply resize the forms. Resizing is simple, altering padding and margin ratios is more hairy!

Add these to your CSS in the your original stackblitz

::ng-deep .mat-form-field-flex > .mat-form-field-infix { padding: 0.4em 0px !important;}
::ng-deep .mat-form-field-appearance-outline .mat-form-field-label { margin-top:-15px; }
::ng-deep label.ng-star-inserted { transform: translateY(-0.59375em) scale(.75) !important; }

UPDATED: with transition for the label...

::ng-deep .mat-form-field-flex > .mat-form-field-infix { padding: 0.4em 0px !important;}
::ng-deep .mat-form-field-label-wrapper { top: -1.5em; }

::ng-deep .mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {
    transform: translateY(-1.1em) scale(.75);
    width: 133.33333%;
}