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.

>Solution :

The most simple solution is to have flex container as parent. That allows you to easily align and justify its children.

Also using float is deprecated, so I’d recommend you to use flexbox or grid instead of float.

  <div
    style="
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
    "
  >
    <div style="width: 70%">
      <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%">
      <button mat-raised-button (click)="clearFilter(1)">Clear Filter</button>
    </div>
  </div>