Angular Reactive Forms template

Question

In the image below, the left one is the current form but I want it to look like the right one (using Flexbox?). How can I achieve this? I haven't been able to find a solution. I am using Angular Material instead of Bootstrap.

<div class="container">

<mat-card>

        <mat-card-title>Filter</mat-card-title>
    
        <mat-card-content>
            <div class="example-container">


                <form class="example-form">

                    <mat-form-field class="example-full-width">
                        <mat-label>Ontvangst op fabriek</mat-label>
                        <select matNativeControl required>
                            <option value="volvo">Volvo</option>
                            <option value="saab">Saab</option>
                            <option value="mercedes">Mercedes</option>
                            <option value="audi">Audi</option>
                        </select>
                    </mat-form-field>
                
                    <mat-form-field class="example-full-width">
                        <mat-label>Losplaats</mat-label>
                        <select matNativeControl required>
                            <option value="volvo">Volvo</option>
                            <option value="saab">Saab</option>
                            <option value="mercedes">Mercedes</option>
                            <option value="audi">Audi</option>
                        </select>
                    </mat-form-field>
                
                    <mat-form-field class="example-full-width">
                        <mat-label>Leverancier</mat-label>
                        <select matNativeControl required>
                            <option value="volvo">Volvo</option>
                            <option value="saab">Saab</option>
                            <option value="mercedes">Mercedes</option>
                            <option value="audi">Audi</option>
                        </select>
                    </mat-form-field>
                
                    <mat-form-field>
                        <input matInput [matDatepicker]="picker" placeholder="Choose a date">
                        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                        <mat-datepicker #picker></mat-datepicker>
                      </mat-form-field>
                
                   
                </form>

            </div>

            <mat-card-actions>
                <button mat-raised-button (click)="login()" color="primary">Zoeken</button>
            </mat-card-actions>
        </mat-card-content>
    

</mat-card>

</div>

Answer 1

You got 2 options

1. Use Angular Material

Put a grid inside your <mat-form-field> https://material.angular.io/components/grid-list/examples

2. Use custom CSS

I changed the class names, sooner or later you have to refactor the example-* stuff anyway, I hope thats ok.

<mat-form-field class="filter--item">
    <mat-label class="filter--item-label">Leverancier</mat-label>
    <select class="filter--item-select" matNativeControl required>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </select>
</mat-form-field>

.filter--item {
    display: flex;
}

.filter--item .filter--item-label {
    width: 30%;
}

.filter--item .filter--item-select {
    width: 70%;
}

Answer 2

You may try below :

Use class : class ="d-flex" and justifyContent : 'right'