I'm having trouble positioning a message input box at the bottom of my page. I've experimented with using align-self-end and creating a css class for ion-footer, but nothing seems to be working.
<ion-content>
<ion-footer align-self-end>
<ion-toolbar color="light">
<ion-row align-self-end>
<ion-col size="10">
<ion-textarea auto-grow class="message-input" rows="1" [(ngModel)]="message"></ion-textarea>
</ion-col>
<ion-col size="2">
<ion-button expand="block" fill="clear" color="primary" [disabled]="message === ''" class="msg-btn"
(click)="sendMessage()">
<ion-icon name="paper-plane"></ion-icon>
</ion-button>
</ion-col>
</ion-row>
</ion-toolbar>
</ion-footer>
</ion-content>
ion-footer{
display: flex;
align-items: flex-end;
margin: auto;
padding-top: .5em;
padding-bottom: .5em;
}