Form field and button in the same row but inconsistent height across variants of form field

#### Reproduction

Use StackBlitz to reproduce your issue: https://stackblitz.com/fork/components-issue

would like to implement row with form fields and button with same height.

Steps to reproduce:
1. https://angular-ivy-qdy6pn.stackblitz.io
2. Pure angular stack ( no custom styles) angular , material , flex


#### Expected Behavior
What behavior were you expecting to see?
it requires to write lot of custom styles for each variant and button. ( not maintainable)
one custom style should work across all variants of form fields and should handle height of buttons and fom-field.

#### Actual Behavior

What behavior did you actually see?

.mat-form-field-appearance-legacy .mat-form-field-wrapper {
padding-bottom: 1.25em;
}

.mat-form-field-appearance-standard .mat-form-field-flex {
padding-top: .75em;
}

.mat-form-field-appearance-fill .mat-form-field-flex {
border-radius: 4px 4px 0 0;
padding: .75em .75em 0 .75em;
}

.mat-form-field-appearance-outline .mat-form-field-infix {
padding: 0.75em 0 0.75em 0 !important;
}

.mat-form-field-appearance-legacy .mat-form-field-infix {
padding-top: 0.75em !important;
}

.mat-form-field-appearance-legacy .mat-form-field-wrapper {
padding-bottom: 1.75em;
}

#### Environment

- Angular:
- CDK/Material:
- Browser(s):
- Operating System (e.g. Windows, macOS, Ubuntu):

Beginne mit den verknüpften StackBlitz-Reproduktionen und vergleiche die Varianten der Formularfelder legacy, standard, fill und outline mit einem Button in derselben Zeile. Überprüfe die aufgelisteten .mat-form-field-appearance-*-Selektoren und ermittle, ob ein gemeinsamer Komponentenstil ihre Höhen ohne benutzerdefinierte Regeln pro Variante angleichen kann. Als abgeschlossen gilt die Aufgabe, wenn die Varianten und der Button mit einem einzigen wartbaren Stil dieselbe Zeilenhöhe haben.

Vom Indexierungsmodell aus dem Issue-Text verfasst.