Angular material mat-date-range-input input custom position for placeholder

Question

Here is the HTML code :

<section class="search-filter-po">
    <form [formGroup]="RequiredFormGroup">
        <div class="row">
            <div class="col-md-12 search-row">
                <span class="d-flex justify-content-center">Creation Date</span>
                <mat-form-field class="set-width">
                    <div class="date_container">
                        <mat-date-range-input [rangePicker]="picker">
                            <input matStartDate formControlName="from_date" placeholder="Start date">
                            <input matEndDate formControlName="to_date" placeholder="End date" (dateInput)="incrementFilterCount()">
                        </mat-date-range-input>
                        <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
                        <mat-date-range-picker #picker></mat-date-range-picker>
                    </div>
                    <mat-error *ngIf="POFormGroup.controls.from_date.hasError('matStartDateInvalid')">Invalid start date</mat-error>
                    <mat-error *ngIf="POFormGroup.controls.to_date.hasError('matEndDateInvalid')">Invalid end date</mat-error>
                </mat-form-field>
            </div>
        </div>
    </form>
</section>

Here is the CSS code :

.date_container {
    float: right;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.mat-date-range-input {
    border: 0px solid #fff;
    border-radius: 0px;
    padding: 0%;
}
.set-width {
    width : 100%;
}

If you reproduce the above you'll get the placeholder aligned to the top left corner as depicted in the picture below.

I want to centre align the placeholder such that it is aligned with the calender icon. In case you are facing any difficulties in reproducing the error here is the Stackbltiz working example