Align mat-form-field to center line within bootstrap column

Question

I'm trying to create a collection of input fields that stretch horizontally across a bootstrap row. However I'm having some issues with vertical aligning the mat-form-fields across the center line of the row.

I've tried applying the following css to the col-4, but this doesn't seem to work. I've tried a few other things but none of them succeed in actually changing the position of the form-field.

display: flex;
align-items: center;

Here's the 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;
}

Here's what it currently looks like, I simply want the mat-form-fields to be lowered so their center lines and in line with the switch on the left hand side, and so that the space above and below the form fields is equal.

Also, it seems that the mat-form-fields boundaries are bigger than the row itself, and thus overflow the row. Is this a bad thing?