title: Angular Material Input and select in one form field
body: <p>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) <a href="https://i.stack.imgur.com/b6Gcc.png" rel="noreferrer"><img src="https://i.stack.imgur.com/b6Gcc.png" alt="Dropdown menus"></a></p>
  
  <p>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.</p>
  
  <pre><code>&lt;mat-form-field appearance="outline"&gt;
       &lt;mat-label&gt;End Time&lt;/mat-label&gt;
       &lt;input matInput type="time" placeholder="HH:MM" id="end_time_hour" [formControl]="timeFormControl"&gt;
       &lt;mat-select name="ampm" class="ampm" [(ngModel)]="event.eampm"&gt;
            &lt;mat-option value="AM"&gt;AM&lt;/mat-option&gt;
            &lt;mat-option value="PM"&gt;PM&lt;/mat-option&gt;
       &lt;/mat-select&gt;
  &lt;/mat-form-field&gt;
  </code></pre>