How to align title and button on the same line?

Question

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>

Answer 1

Add this CSS on page-header class:

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

Answer 2

Display Method

.page-header {
  border: 1px solid black;
}

.display-child-element {
  display: inline-block;
  vertical-align: middle;
  border: 1px solid red;
}

<header class="page-header">
  <h1 class="display-child-element">TITLE</h1>
  <button class="display-child-element">TEST</button>
</header>

Flexbox Method

.flex-parent-element {
  display: flex;
  border: 1px solid black;
  width: 50%;
}

.flex-child-element {
  flex: 1;
  border: 1px solid red;
}

<header class="page-header flex-parent-element">
  <h1 class="flex-child-element">TITLE</h1>
  <button class="flex-child-element">TEST</button>
</header>

Grid Method

.grid-container-element { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    grid-gap: 20px; 
    border: 1px solid black; 
    width: 50%; 
} 
.grid-child-element { 
    margin: 10px; 
    border: 1px solid red; 
}

<header class="page-header grid-container-element">
  <h1 class="grid-child-element">TITLE</h1>
  <button class="grid-child-element">TEST</button>
</header>