Угловой 6 и угловой материал

Question

Я пытаюсь выяснить, как уменьшить разрывы компонентов между элементами.

В приведенном ниже HTML-файле я пытаюсь исправить порядок и дату.В настоящее время они занимают ненужное место на экране.

Файл HTML:

<h4>Customer Order</h4> 
<div class="container">
<section class="order-form">
  <form fxLayout="column" fxLayoutAlign="center" #f="ngForm" (ngSubmit)="onSave(f)">
  <div class="order-form-left" style="width:110px !important">    
    <mat-form-field class="mat-headline">
      <input 
        matInput 
        placeholder="Order Date" 
        [matDatepicker]="picker" 
        [max]="maxDate"
        ngModel name="orderdate"
        required>
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
    </mat-form-field>
    <mat-form-field class="mat-headline">
        <input 
          type="custref" 
          matInput 
          placeholder="Customer Reference" 
          ngModel name="custref"
          required minlength="6"
          #custRefInput="ngModel">
        <mat-error *ngIf="custRefInput.hasError('required')">Field must not be left blank</mat-error>
        <mat-error>Cust Ref not valid</mat-error>
        <mat-hint>Should be a valid Customer Reference 6 characters long </mat-hint>
      </mat-form-field>  
  </div>

    <button mat-raised-button color="primary" [disabled]="f.invalid">Save</button>

  </form>
</section>
</div>
<hr>

CSS это;

.order-form {
    width: 1100px;
  }

.mat-headline {
    width:110px;
    font-size: 12px;
    line-height: 22px;
    font-weight: 100;
}

h4 {
    margin-top: 0px;
    margin-bottom: 0px;
}

Вывод выглядит следующим образом: