How to make a placeholder surrounded by rectangular box in html/css and angular material?

Question

I have a design below (Start Date, End Date and Please enter unavailability Reason are placeholders surrounded by rectangular box) which I am trying to replicate in HTML/CSS and angular material.

In the following design, I am unable to make a rectangular box over the placeholders as shown in the 2nd image.

At this moment, I am able to get the below design with the HTML and CSS codes following it (with no rectangular box over the placeholders).

Problem Statement: I am wondering what changes do I need to make in my below HTML and CSS codes in order to put a rectangle box over the placeholders (In HTML PORTAL.StartDate is Start Date, PORTAL.EndDate is End Date and Portal.UnavailabilityReason is Please enter Unavailability Reason are placeholders as shown in the 1st image. )

HTML:

<div class="component-title">
  {{'PORTAL.UNAVAILABILITY' | translate}}
</div>
<mat-toolbar>
  <div class="container"
       fxLayout="row"
       fxLayout.xs="column"
       fxLayoutGap.xs="0">
    <div>
      <h1>{{componentTitle}}</h1>
    </div>
  </div>
</mat-toolbar>
<form class="unavailability-form" [formGroup]="unavailabilityForm" *ngIf="loaded">
  <mat-card>
    <mat-card-content>
      <div class="container" fxLayout.xs="column" fxLayoutGap.xs="0" fxLayoutGap="10px">
        <div class="start-date" fxFlex="50%" fxFlexOrder="1">
          <mat-form-field>
            <input matInput [matDatepicker]="picker1" placeholder="{{'PORTAL.STARTDATE' | translate}}" type="text" formControlName="startDate" [readonly]="!componentPermission.writePermission">
            <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
            <mat-datepicker #picker1></mat-datepicker>
          </mat-form-field>
        </div>
        <div class="end-date" fxFlex="50%" fxFlexOrder="2">
          <mat-form-field>
            <input matInput [matDatepicker]="picker2" placeholder="{{'PORTAL.ENDDATE' | translate}}" type="text" [min]="unavailabilityForm.controls.startDate.value" formControlName="endDate" [readonly]="!componentPermission.writePermission">
            <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
            <mat-datepicker #picker2></mat-datepicker>
          </mat-form-field>
        </div>
      </div>
      <div class="container" fxLayout="row" fxLayout.xs="column" fxLayoutGap.xs="0" fxLayoutGap="10px">
        <div class="unavailability-reason">
          <mat-form-field>
            <input matInput placeholder="{{'PORTAL.UNAVAILABILITYREASON' | translate}}" type="text" formControlName="unavailabilityReason" [(ngModel)]="unavailability.unavailabilityReason" [readonly]="!componentPermission.writePermission">
          </mat-form-field>
        </div>
      </div>
    </mat-card-content>
    <mat-card-actions>
      <div class="container" fxLayout="row" fxLayout.xs="column" fxLayoutGap.xs="0">
        <div class="confirm-button" fxFlex="100%">
          <button mat-raised-button color="primary" [disabled]="!unavailabilityForm.valid || !componentPermission.writePermission" (click)="onSave()">{{'PORTAL.CONFIRM' | translate}}</button>
          <!--<button mat-raised-button [matDialogClose]="canceled" color="primary">{{'PORTAL.CANCEL' | translate}}</button>-->
        </div>
      </div>
    </mat-card-actions>
  </mat-card>
</form>

CSS:

.container
{
  padding-top: 2%;
}


.start-date
{
  text-align: center;
}

.end-date
{
text-align: center;
}

.unavailability-reason {
 margin-left: 43%;
}

.confirm-button
{
  text-align: right;
}

The version of Bootstrap which I am using is 3.3.7.