Why can I not vertically align a button in a div in Angular?

I have spent way more time on this than any human should, I been through at least 30 solutions on Stack before posting this, as I know it is a VERY common issue. So I apologize for making my own post but I truly cannot get it working.

My code is below:


<div style="width: 100%">
<div style="width: 70%; float: left;">
<mat-form-field appearance="standard" >
<mat-label>Filter Table Data</mat-label>
<input matInput [(ngModel)]="filter" (keyup)="applyFilter($event)">
</mat-form-field>
</div>
<div style="width: 30%; float: right;">
<button
stye="display: flex; flex-direction: column; align-items: center;"
mat-raised-button (click)="clearFilter(1)" >
Clear Filter
</button>
</div>
</div>

This is how it displays on my site:



Any ideas on how I can get it working to be vertically aligned?

End result goal: the button ("Clear Filter") shown in the image needs to be vertically aligned, currently it shows at the top of the div.

Continue reading...