How do I increase the width of a mat-select form in Angular Material?

I'm trying to increase the width of the mat select form dynamically based on the available space while keeping the title of the form to the left. My solution below increases the width of the form but places the title above the form and not to the left.

Dropdown style:

mat-form-field {
  width: 100%;
}

html:

<span style="font-size: large; "> Subject Area </span>
<mat-form-field>
     <mat-label>Select a Subject Area</mat-label>
     <mat-select>
         <mat-option *ngFor="let subjectArea of subjectAreas" [value]="subjectArea.value">
             {{subjectArea.viewValue}}
         </mat-option>
     </mat-select>
</mat-form-field>

Edit: The title is now to the left of the form but is wrapping. There is sufficient space on the web page to keep all of the titles in one line. Is this due to the material grid list organizing three separate forms in the center of the page? New Issue