对齐表单旁边的按钮

Question

我正在使用 bootstrap 5 并想创建一个时事通讯表单。

.form-control-newsletter {
  display: block;
  width: 100%;
  min-height: calc(1.5em + .75rem + 2px);
  padding: .575rem .75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 52px;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out
}

.newsletter-bg {
  background-color: #eee;
}

.card-newsletter {
  padding: 20px;
  background-color: #eee;
  padding-bottom: 50px;
  padding-top: 50px
}

.form-control-newsletter:focus {
  color: #495057;
  background-color: #fff;
  border-color: #f9a826;
  outline: 0;
  box-shadow: none
}

.border-rad {
  border-top-right-radius: 28px;
  border-bottom-right-radius: 28px;
  color: #fff;
  background-color: #f9a826;
  border-color: #f9a826
}

.border-rad:hover {
  background-color: #f9a826;
  border-color: #f9a826
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="row d-flex justify-content-center align-items-center newsletter-bg">
  <div class="col-md-6">
    <div class="card-newsletter">
      <div class="text-center">
        <span class="d-block mt-3">Subscribe to our newsletter in order not to miss new arrivals <br> promotions and discounts of our store</span>
        <div class="mx-5">
          <div class="input-group mb-3 mt-4"><input type="text" class="form-control-newsletter" placeholder="Enter email" aria-label="Recipient's username" aria-describedby="button-addon2">
            <button class="btn btn-success border-rad" type="button" id="button-addon2">Subscribe</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

我想通过以下方式创建表单：

单击表单时，它应如下所示：

任何建议我做错了什么？

为什么表单旁边没有显示按钮？

感谢您的回复！