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.