refactor (MatCalendarHeader): fix styling issue

Author: Tobias Schweizer

src/demo-app/datepicker/custom-header.scss

@@ -1,6 +1,7 @@
 .custom-header {
-  padding: 1.5em;
+  padding: 1em 1.5em;
   display: flex;
+  align-items: center;
 }
 
 .custom-header-label {

src/demo-app/datepicker/datepicker-demo.html

@@ -39,17 +39,6 @@ <h2>Options</h2>
   </mat-form-field>
 </p>
 
-<h2>Datepicker with custom header</h2>
-<p>
-  <mat-form-field>
-    <mat-label>Custom calendar header</mat-label>
-    <input matInput [matDatepicker]="customCalendarHeaderPicker"
-           [disabled]="inputDisabled">
-    <mat-datepicker-toggle matSuffix [for]="customCalendarHeaderPicker"></mat-datepicker-toggle>
-    <mat-datepicker #customCalendarHeaderPicker [touchUi]="touch" [disabled]="datepickerDisabled" [calendarHeaderComponent]="customHeader"></mat-datepicker>
-  </mat-form-field>
-</p>
-
 <h2>Result</h2>
 
 <p>
@@ -155,3 +144,14 @@ <h2>Datepicker with value property binding</h2>
                     [startView]="yearView ? 'year' : 'month'"></mat-datepicker>
   </mat-form-field>
 </p>
+
+<h2>Datepicker with custom header</h2>
+<p>
+  <mat-form-field>
+    <mat-label>Custom calendar header</mat-label>
+    <input matInput [matDatepicker]="customCalendarHeaderPicker"
+           [disabled]="inputDisabled">
+    <mat-datepicker-toggle matSuffix [for]="customCalendarHeaderPicker"></mat-datepicker-toggle>
+    <mat-datepicker #customCalendarHeaderPicker [touchUi]="touch" [disabled]="datepickerDisabled" [calendarHeaderComponent]="customHeader"></mat-datepicker>
+  </mat-form-field>
+</p>