所以我可能太笨了，看不到修复，这可能是一个简单的，但我不是超级有经验的。
我有一个全宽按钮，按钮上有文字和图标，背景颜色较深。我希望文字始终居中，图标和背景颜色较深的图标始终浮动在右侧。
我该如何做到这一点？
https://codepen.io/MrBlack99/pen/QWxVjxY

HTML格式：

<button type="button" class="button">
  <span class="button__text">Vergelijk 8 Prijzen</span>
  <span class="button__icon">
    <ion-icon name="chevron-forward-outline"></ion-icon>
  </span>
</button>
<script src="https://unpkg.com/ionicons@5.4.0/dist/ionicons.js"></script>

CSS格式：

.button {
  display: flex;
  height: 50px;
  padding: 0;
  background: #1e3c72;
  border: none;
  outline: none;
  border-radius: 5px;
  overflow: hidden;
  font-family: "Quicksand", sans-serif;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
}

.button:hover {
  background: #234583;
}

.button:active {
  background: #234583;
}

.button__text,
.button__icon {
  display: inline-flex;
  align-items: center;
  padding: 0 24px;
  color: #fff;
  height: 100%;
  float: right;
}

.button__icon {
  font-size: 1.5em;
  background: rgba(0, 0, 0, 0.08);
  float: right;
}