CSS Flexbox не выравнивает текстовое поле с кнопкой?

Question

Попытка выучить и применить несколько flexbox к странице с помощью Bootstrap 4, используя SCSS.Я пробовал несколько комбинаций, но не могу заставить текстовое поле и кнопку выравниваться по горизонтали.

Я пытаюсь использовать SCSS и HTML, но текстовые поля и кнопки располагаются друг над другом.

<div class="impersonate__conatiner">
    <div class="impersonate__item">
        @Html.TextBoxFor(m => m.ImpersonateUserId, new { @class = "form-control impersonate__item", @placeholder = "Employee ID", @maxlength = "8", autofocus = "autofocus" })
        <button type="submit" class="btn btn-secondary">Impersonate</button>
    </div>        
</div>


.impersonate{
    &__container{
        display: flex;
    }

    &__item{
        flex: 1 1 auto;
    }
}

Если я добавлю что-то похожее в Code Pen, оно, похоже, будет работать.Это то, что у меня есть в Code Pen.

<div class="impersonate__conatiner">
    <div class="impersonate__item">
       <input id="search" type="search" placeholder="text"/>
        <button type="submit" class="btn btn-secondary">Impersonate</button>
    </div>        
</div>

.impersonate__container{
        display: flex;
    }

.impersonate__item{
  flex: 1 1 auto;
}

Любые предложения, чтобы мне не приходилось возвращаться к столу.