How to align title and button on the same line?

I have a title and a button. The title should be left-aligned and the button should be right-aligned. But I have a problem that the button goes up.

How to align title and button on the same line?

.page-header {
  margin: -16px -16px 16px;
  padding: 16px;
  color: $white;
  background-color: $red;
}

<header class="page-header">
  <h1>{{title }}</h1>
  <span fxFlex></span>
  <button mat-icon-button>
            <mat-icon>navigate_before</mat-icon>
        </button>
</header>

Add this CSS on page-header class:

 .page-header {
   ...;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }