Expected behavior

I'm trying to put the date and time pickers in the same row, md-6 cols each.

Actual behavior

When I put them in the same row, the date picker displays weird. If I remove the time picker, the display/format is fine.

Resources (screenshots, code snippets etc.)

<div class="row" *ngIf="!isRecurringOptions">
    <div class="col-md-6">
      <!-- Event start date field -->
      <div class="form-group">
        <label for="startdate">Start Date <span class="red-text">*</span></label>
        <mdb-date-picker [placeholder]="'Select a start date...'" formControlName="startDate" name="startdate" [options]="startDateOptions"></mdb-date-picker>

        <!-- Event start date field error message -->
        <div *ngIf="eventModalForm.controls['startDate'].invalid && (eventModalForm.controls['startDate'].dirty || eventModalForm.controls['startDate'].touched)">
          <div *ngIf="eventModalForm.controls['startDate'].errors.required" class="alert alert-danger d-inline-flex mt-1" role="alert">
            <div class="tab my-auto"><i class="fas fa-exclamation-circle fa light-icon"></i></div>
            <div class="alert-text my-auto">Please select an event start date</div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <!-- Event start time field -->
      <div class="form-group">
        <label for="starttime">Start Time <span class="red-text">*</span></label>
        <mdb-time-picker [buttonLabel]="'Done'"
                         [twelvehour]="true"
                         [darktheme]="false"
                         [placeholder]="'Select a start time'"
                         [showClock]="fasle">
        </mdb-time-picker>
      </div>
    </div>
  </div>

Screenshot: https://imgur.com/a/iP6hqKl