Angular Material Input and select in one form field

Question

I want the input field and the drop down field in the same area like the one on the left (I did this on the inspector)

No matter what class I put in my stylesheet it won't shrink the size of the select menu. This is the html code I have.

<mat-form-field appearance="outline">
     <mat-label>End Time</mat-label>
     <input matInput type="time" placeholder="HH:MM" id="end_time_hour" [formControl]="timeFormControl">
     <mat-select name="ampm" class="ampm" [(ngModel)]="event.eampm">
          <mat-option value="AM">AM</mat-option>
          <mat-option value="PM">PM</mat-option>
     </mat-select>
</mat-form-field>

Answer 1

You could wrap your form field in a div and assign it a class so that you can nest the CSS. The reason to nest the CSS is to avoid it affecting the rest of the controls. I did something like this:

<div class="time-picker-component">
    <mat-form-field appearance="outline">
        <mat-label>End Time</mat-label>
        <input matInput type="time" placeholder="HH:MM" id="end_time_hour" [formControl]="timeFormControl">
     <mat-select name="ampm" class="ampm" [(ngModel)]="event.eampm">
          <mat-option value="AM">AM</mat-option>
          <mat-option value="PM">PM</mat-option>
     </mat-select>
   </mat-form-field>
</div>

and then add the folloing CSS somewhere globally:

.time-picker-component .mat-form-field-infix {
  display: inherit;
}

Demo