Unable to align <span> Texts </span> in title of Navbar on Header

Ionic Framework ionic-v3
1

Hello People,

Source Code:

<ion-header>

  <ion-navbar>
       <ion-title>
        <span class="text text-center">Login</span><span class="text text-right">Forgot?</span>
    </ion-title>
    
  </ion-navbar>

</ion-header>

<ion-content padding>

</ion-content>

I tried to align the “Login” at the center and “Forgot?” at the right. However, all the texts display at the left.

Anyone mind lend a helping hand?

Thanks