Q:

angular matDatepicker without mat-form-field

I have implemented the matDatepicker in the following way:
<div class="container">
  <form [formGroup]="addCarForm" (ngSubmit)="onSubmit()">
    <div class="row">
      <div class="col-lg-6">
          <input class="form-control"> 
      </div>
      <div class="col-lg-6">
          <input matInput [matDatepicker]="picker" placeholder="Choose a date" class="form-control">
          <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
          <mat-datepicker #picker></mat-datepicker>
      </div>
      </div>
   </form>
</div>

Which makes forces the icon to be below the input field. How can I adjust it to make it be at the end of the input field, and make the input field + the icon be equal to the width of the col (take a look at the image for a illustration)
I have created an example of my problem here: 
https://stackblitz.com/edit/angular-xzkvqc?file=src%2Fapp%2Fapp.component.html

A:

Wrap in a flex container so they will never be out of place
<div class="col-lg-6">
  <div style="display:flex"> <!-- wrapping in a flex container -->
    <input matInput [matDatepicker]="picker" placeholder="Choose a date" class="form-control">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
  </div>
</div>

Updated Stackblitz https://stackblitz.com/edit/angular-nbupcg

