Angular Material, Flex align right button - flexbox

Question

I Have this code:
<mat-card>
<mat-card-header>
<mat-card-subtitle>
<h2>Explorador de Eventos</h2>
</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<div>
<mat-form-field>
<input matInput [matDatepicker]="picker1" [(ngModel)]="filter.startDate" placeholder="Fecha inicio">
<mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
<mat-datepicker #picker1></mat-datepicker>
</mat-form-field>
<mat-form-field>
<input type="time" [(ngModel)]="filter.startTime" matInput placeholder="Hora inicio">
</mat-form-field>
<button (click)="search()" mat-raised-button class="m-1">Monitorear</button>
</div>
</mat-card-content>
</mat-card>
How can I mae that button float or get aligned to right inside that div?
Currently is showing this way:
I would like to have it like this:

Answer 1

Depends on your requirements concerning how it should it behave for small containers, during stretching etc. this can be implemented in multiple ways. Here is simple solution using flex.
First, add another wrapper within the mat-card-content. It should contain the div with fields and the button.
<mat-card>
<mat-card-header>
<mat-card-subtitle>
<h2>Explorador de Eventos</h2>
</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<div class="wrapper">
<div class="fields-wrapper">
<mat-form-field>
<input matInput [matDatepicker]="picker1" [(ngModel)]="filter.startDate" placeholder="Fecha inicio">
<mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
<mat-datepicker #picker1></mat-datepicker>
</mat-form-field>
<mat-form-field>
<input type="time" [(ngModel)]="filter.startTime" matInput placeholder="Hora inicio">
</mat-form-field>
</div>
<button (click)="search()" mat-raised-button class="m-1">Monitorear</button>
</div>
</mat-card-content>
</mat-card>
Then, make the parent flex container, align items to baseline (so that they are properly aligned horizontally), justify content as space-between (so that items are aligned to left-most and right-most borders respectively).
.wrapper {
display: flex;
align-items: baseline;
justify-content: space-between;
flex-wrap: wrap;
}
.fields-wrapper {
display: inline-flex;
flex-wrap: wrap;
}
Also added flex-wrap so that it wraps for smaller displays.
Stackblitz example