Align button to text in span

I'm using Ionic 4. I have an ion-footer that I want to put my app's privacy statement links. It looks like this now. May I know how should I align the buttons to the text? Or is there a better way about this?

HTML Code:

<ion-footer no-border class="login-footer">
  <ion-toolbar>
    <span class="login-span">Welcome to testing app. You consent to</span>
    <ion-button class="login-footer-btn" fill="clear" (click)="privacyPolicy()">Privacy Policy</ion-button>
    <span class="login-span"> and </span>
    <ion-button class="login-footer-btn" fill="clear" (click)="termsOfUse()">Terms of Use</ion-button>
    <span class="login-span">.</span>
  </ion-toolbar>
</ion-footer>

CSS Code:

.footer-title
{
    font-size: small;
    font-weight: 300;
}

.login-footer{
    padding-left: 5px;
}

.login-span
{
    font-size: small;
    font-weight: 300;
}

.login-footer-btn
{
    --padding-start: 0;
    --padding-end: 0;
    margin-top: 0;
    margin-bottom: 0;
    height: auto;
    text-transform: none;
    font-weight: 300;
    font-size: small;
    letter-spacing: 0;
}

Solution

Try this

.login-footer-btn{
  display:inline-block;
  vertical-align:middle
}