Выровняйте поле мат-формы по центральной линии в столбце bootstrap

Question

Я пытаюсь создать коллекцию полей ввода, которые растягиваются горизонтально вдоль строки bootstrap. Однако у меня есть некоторые проблемы с вертикальным выравниванием полей mat-form по центральной линии строки.

Я пытался применить следующий css к col-4, но это не работает. Я пробовал несколько других вещей, но ни одному из них не удалось изменить положение поля формы.

display: flex;
align-items: center;

Вот html

<div class="row mt-lg">
                    <div class="col-12 p-lg location-builder-container">
                        <div class="row">
                            <div class="col-2 flex-center">
                                <mat-label>Include</mat-label>
                                <mat-slide-toggle></mat-slide-toggle>
                            </div>
                            <div class="col-4">
                                    <mat-form-field appearance="fill">
                                        <mat-icon class="prefix mr-sm" matPrefix>comment</mat-icon>
                                        <input matInput placeholder="pat@example.com" [formControl]="email" required>
                                    </mat-form-field>
                            </div>
                            <div class="col-4">
                                <mat-form-field appearance="fill">
                                    <mat-icon class="prefix mr-sm" matPrefix>comment</mat-icon>
                                    <input matInput [placeholder]="getTranslateKey('comment.label') | translate"
                                           formControlName="addComment" id="addComment" autocomplete="off"
                                           #commentInput>
                                </mat-form-field>
                            </div>
                            <div class="col-2 flex-center">
                                <button>Add IP</button>
                            </div>
                        </div>
                    </div>
                </div>

CSS

.mt-xxl {
  margin-top: 48px;
}

.location-builder-container {
  //background-color: #498bb9;
  background-color: #e0ebef75;
  //box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  mat-icon.prefix {
    color: #498bb9;
    position: relative;
    top: 4px;
  }
  ::ng-deep .mat-form-field-underline {
    display: none;
  }
  ::ng-deep .mat-form-field {
    line-height: 1.6 !important;
  }
  ::ng-deep .mat-form-field-infix {
    border-top: 0.5rem solid transparent !important;
    top: -2px;
    width: 100%;
  }
  ::ng-deep .mat-form-field-appearance-fill .mat-form-field-flex {
    background-color: white;
  }
}

.field {
  background-color: white;
}

.flex-center{
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

Вот как это выглядит в настоящее время: я просто хочу, чтобы поля mat-form были опущены так, чтобы их центральные линии находились на одной линии с переключателем с левой стороны, и чтобы пространство над и под полями формы было одинаковым.

Кроме того, кажется, что границы полей mat-form больше, чем сама строка, и, таким образом, переполняют строку. Это плохо?