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):

Bắt đầu với các bản tái hiện StackBlitz được liên kết và so sánh các biến thể trường biểu mẫu legacy, standard, fill và outline với một nút trên cùng một hàng. Xem xét các selector .mat-form-field-appearance-* được liệt kê và xác định liệu một style component dùng chung có thể căn chỉnh chiều cao của chúng mà không cần các rule tùy chỉnh riêng cho từng biến thể hay không. Được xem là hoàn tất khi các biến thể và nút có chiều cao hàng nhất quán bằng một style có thể duy trì duy nhất.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.