Why will height not change for specific mat-form-field? (Angular 6)

Goal: Make the height of a particular mat-form-field smaller (but still keep it positioned where it is, to the right of "Please Sign In"). It should take the minimum amount of space around the text value and dropdown arrow.

It currently looks like this:

I want the lines on the box around it to be closer to the word English and the down arrow. The box was created by adding: appearance="outline"

Problem: I was able to successfully change the width, but not the height.

What I've tried:

• I've gone through SO articles such as How to change height in mat-form-field and Adjusting height of mat-form-field Angular Material

• I've tried adjusting the height itself (height: 40 px)

• I've tried minimizing the padding to make it look smaller (padding-top: -1.84375em; )

• I've tried changing it in Chrome Devtools but the text then aligns to the bottom of the box

HTML:

<div class="title-container">
    <mat-card-title class="text-center" i18n="@@MoVeSeLo_H1_1">
        Please Sign In
    </mat-card-title>
    <form [formGroup]="_siteForm">
        <mat-form-field class="language-field" appearance="outline">
            <mat-select (selectionChange)="doSomething($event)" [value]="languages[i]">
                <mat-option *ngFor="let language of languages" [value]="language">
                    {{language.viewValue}}
                </mat-option>
            </mat-select>
        </mat-form-field>
    </form>
</div>

CSS:

.title-container {
    position: relative;
    margin-top: 8px;
}

.language-field {
    position: absolute;
    right: 0;
    top: 0;
    margin-top: -16px;
    width: 115px;
    height:40px;
    padding-top: -1.84375em;    
}