bootstrap中文本框和按钮的CSS对齐问题

<div class="row">
  <div class="col-sm-6">
    <input type="text" class="form-control" placeholder="文本框">
  </div>
  <div class="col-sm-6 text-center">
    <button class="btn btn-primary">按钮</button>
  </div>
</div>

<div class="d-flex justify-content-center">
  <input type="text" class="form-control" placeholder="文本框">
  <button class="btn btn-primary">按钮</button>
</div>

<style>
  .custom-alignment {
    display: inline-block;
    vertical-align: middle;
  }
</style>

<div class="custom-alignment">
  <input type="text" class="form-control" placeholder="文本框">
  <button class="btn btn-primary">按钮</button>
</div>