CSS Flexbox不能使文本框与按钮对齐？

Question

尝试使用SCSS学习一些flexbox并将其应用于具有Bootstrap 4的页面。我尝试了几种组合，但无法使texbox和按钮水平对齐。

这是我正在尝试的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;
}

任何建议，这样我就不必求助于餐桌了。