mat-grid-list issues with aligning the second row properly - angular-material

Question

I have two fields in first mat-grid-list Name and function and in second row I have search and clear button , my issue over here is I want to float all the buttons towards right side of grid, but I couldnt do it accordingly also when I give float:right; the line is not displaying.I wanted the to be properly aligned , how can i achieve it ?
<mat-grid-list cols = "7" >
<mat-grid-tile
[colspan] = "1"
[rowspan] = "1">
<div class="form-group user">
<label for="name">Name</label>
<input matInput class="form-control input" [(ngModel)]="userName"matAutocomplete]="auto">
<mat-autocomplete class="user-autocomplete" #auto="matAutocomplete">
<mat-option *ngFor="let user of filteredUsers" [value]="user.name">
<span class="username">{{user.name}}</span>
<span class="usercode">{{user.code}}</span>
</mat-option>
</mat-autocomplete>
</div>
</mat-grid-tile>
<mat-grid-tile
[colspan] = "1"
[rowspan] = "1">
<div class="form-group function">
<label for="function">FUNCTION</label>
<div class="input-group">
<mat-form-field floatLabel="never">
<mat-select placeholder="Select Function">
<mat-option *ngFor="let option of functionOptions" [value]="option.name">
{{option.name}}
</mat-option>
</mat-select>
<img class="material-icons chevron-down-torq select-chevron" src="assets/icons/dropdown-chevron.svg" />
</mat-form-field>
</div>
</div>
</mat-grid-tile>
</mat-grid-list>
<mat-grid-list cols = "7" style="float:right" >
<mat-grid-tile
[colspan] = "1"
[rowspan] = "1">
<div class="buttons">
<button mat-button name="search" class="search" [ngClass]="{'disable-search-btn' : !isSearch}">search</button>
</div>
</mat-grid-tile>
<mat-grid-tile
[colspan] = "1"
[rowspan] = "1">
<div class="buttons">
<button mat-button name="clear" class="clear" [ngClass]="{'disable-clear-btn' : !isSearch}">clear</button>
</div>
</mat-grid-tile>
</mat-grid-list>
css:
.buttons {
grid-gap: 20px;
.search {
border: none;
padding: 5px 15px;
background-color: blue;
color: white;
text-transform: capitalize;
font-weight: normal;
cursor: pointer;
&:hover {
background-color: grey;
}
&:focus {
background-color: dark grey;
outline: 0;
}
}
.clear {
border: 1px solid lightblue;
padding: 5px 15px;
text-transform: capitalize;
font-family: $roboto-font;
font-weight: normal;
font-size: $font-size;
&:hover {
background-color: red;
}
&:focus {
background-color: green;
outline: 0;
}
}

Answer 1

You need to add style="float:right" on buttons.
<mat-grid-list cols = "7">
<mat-grid-tile
[colspan] = "5"
[rowspan] = "1">
</mat-grid-tile>
<mat-grid-tile
[colspan] = "1"
[rowspan] = "1">
<div class="buttons">
<button mat-button name="search" class="search" [ngClass]="{'disable-search-btn' : !isSearch}" style="float:right">search</button>
</div>
</mat-grid-tile>
<mat-grid-tile
[colspan] = "1"
[rowspan] = "1">
<div class="buttons">
<button mat-button name="clear" class="clear" [ngClass]="{'disable-clear-btn' : !isSearch}" style="float:right">clear</button>
</div>
</mat-grid-tile>
</mat-grid-list>