Форма одной строки в Bootstrap 4 не реагирует на изменение масштаба

Question

У меня есть форма на моем сайте, и я хочу, чтобы она отображалась в одном ряду.Если я увеличу масштаб, он станет не реагирующим на md sm и xs.Вот Codepen с моим примером.Спасибо за любую помощь.

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<form class="col-md-12" style="display: flex; align-items: center">
                <label class="d-inline" for="inlineFormInput" style="font: 22px italic">Transaction Summary</label> 
 <label style="font-size: 12px" class="ml-1 mr-1" for="inlineFormInput">Submitted time</label>
<input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0 mr-lg-5" id="inlineFormInput" (select)="onDateSelection($event)" ngbDatepicker #d="ngbDatepicker" [displayMonths]="2" [dayTemplate]="t" outsideDays="hidden" (click)="d.toggle()"/>
                <input style="width: 200px" class="form-control mr-1" placeholder="yyyy-mm-dd"
             name="dp" [(ngModel)]="model" ngbDatepicker (click)="d.toggle()" [markDisabled]="isDisabled" #d="ngbDatepicker">

            <ng-template #customDay let-date let-currentMonth="currentMonth" let-selected="selected" let-disabled="disabled" let-focused="focused">
            <span class="custom-day" [class.weekend]="isWeekend(date)" [class.focused]="focused"
                    [class.bg-primary]="selected" [class.hidden]="date.month !== currentMonth" [class.text-muted]="disabled">
            </span>
            </ng-template>
                <label style="font-size: 12px" class="mr-1" for="inlineFormInput">Status</label>
                <input type="text" style="width: 200px" class="form-control mb-2 mb-sm-0" id="inlineFormInput">
                <div class="input-group mb-2 mr-sm-2 mb-sm-0 col-md-5 col-lg-4">
                    <label style="font-size: 12px" class="mr-1 mt-1" for="inlineFormInputGroup">Search</label>
                    <div class="input-group-prepend">
                    <span class="input-group-text bg-white"><i class="fa fa-search"></i></span>
                    </div>
                    <input type="text" style="width: 125px" class="form-control border-left-0 mr-2" id="inlineFormInputGroup" placeholder="Enter anything here!">
                    <button type="text" class="btn btn-primary mr-2 d-inline"><i class="fa fa-search mr-1"></i>Filter</button>
                    <button type="text" class="btn btn-dark d-inline"><i class="fa fa-file-export mr-1"></i>Export</button>
                </div>
            </form>