Actual behavior

I have a section within a mdbCollapse at the very end. When I expand the collapsible div, the last two fields, which are the Date and Time Picker components, extend past and out of the collapsible container.

Resources (screenshots, code snippets etc.)

The container starts as this:

<div class="recurrence-bg">
    <button mdbBtn color="link" class="waves-light w-100 mx-0 px-3" type="button"
            (click)="toggleRecurringOptions()" mdbWavesEffect>
      <span class=""><span class="float-left text-capitalize">Recurrence Options</span> <i class="fa float-right mt-1" [ngClass]="{'fa-chevron-up': eventCollapse, 'fa-chevron-down': !eventCollapse}"></i></span>
    </button>

    <div class="" mdbCollapse #recurringOptions="bs-collapse">...</div>
</div>

Then the last section looks like this (some divs may not align as I edited the code block to remove unneeded sections - so this won't be the cause of the issue):

<div *ngIf="isRecurringOptions" class="row">
          <div class="col-md-6">
            <div class="form-group">
              <label for="recurringStartDate">Start Date <span class="red-text">*</span></label>
              <div class="md-form">
                <mdb-date-picker [placeholder]="'Select a start date...'" formControlName="startDate" name="recurringStartDate"
                (inputFieldChanged)="validateDaysInMonth($event)" [options]="startDateOptions"></mdb-date-picker>
              </div>
          </div>
          <div class="col-md-6">
            <div class="form-group">
              <div *ngIf="eventModalForm.controls['patternEndType'].value === 2">
                <label for="repeatEvery">End After <span class="red-text">*</span></label><br />
                <input type="text" formControlName="occurrences" class="form-control custom-form-control d-inline"
                       id="repeatEvery" style="max-width: 50px"><span class="font-weight-400 d-inline-block ml-2">occurrences</span>
              </div>
              <div *ngIf="eventModalForm.controls['patternEndType'].value === 3">
                <label for="recurringEndDate">End By <span class="red-text">*</span></label>
                <div class="md-form">
                  <mdb-date-picker [placeholder]="'Select an end date...'" formControlName="endDate" name="recurringEndDate"
                  [options]="endDateOptions"></mdb-date-picker>
                </div>
              </div>
            </div>

          </div>
        </div>
</div>

The thing I've noticed is that if I change the md-form class to a regular form-group this display issue doesn't exist (though this creates another issue as discussed here: https://mdbootstrap.com/support/angular/date-and-time-picker-display-issue-in-same-row/

Here is a screenshot of how the UI looks: https://imgur.com/a/ehmKqsU