IONIC 4 content doesn't vertically align properly

Ionic Framework
1

Why isnt this all vertically aligned
image

.flex-container{
    width: 100%;
    font-size: 2em;
    color: black;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    text-align: center;
    align-items: center;
    vertical-align: middle;
    line-height:50px;
}

<ion-content>

  <span class="flex-container">

    <ion-button mode="ios" fill="clear" icon-only>
      <ion-icon name="arrow-dropleft" mode="ios"></ion-icon>
    </ion-button>

    <h1>5/6/2019</h1>
    
    <ion-button mode="ios" fill="clear" icon-only>
      <ion-icon name="arrow-dropright" mode="ios"></ion-icon>
    </ion-button>

  </span>

</ion-content>