Угловой указатель даты материала не размещает элементы в одной строке

В моем веб-приложении я использую средство выбора даты углового материала. Проблема в том, что он не показывает все элементы подряд. Это мой взгляд:

Выбор даты

Чтобы мой настраиваемый css не влиял на представление, я удалил все настраиваемые стили.

Таким образом, мой html очень прост. Я просто скопировал и вставил пример углового материала с официального портала angular (базовый элемент выбора даты):

<mat-form-field appearance = "fill">
  <mat-label>Choose a date</mat-label>
  <input matInput [matDatepicker] = "picker">
  <mat-hint>MM/DD/YYYY</mat-hint>
  <mat-datepicker-toggle matIconSuffix [for] = "picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

Но в соответствии с примером материала angular в режиме онлайн изображение должно быть примерно таким: Basi datepicker из углового материала онлайн-помощь

В чем я не прав?