如何创建中间列可换行的三栏布局？

我想要创建如图所示的三栏布局：

需求细节：当视口尺寸过小时，可变长度的字符串可以在徽章下方换行或折行，同时Chevron按钮固定在左上角位置。

我尝试过使用flex容器、grid布局，但均未达到理想效果：有时字符串和按钮都会下移，有时仅按钮下移，都不符合需求。

若有人能帮助我实现该布局及预期效果，我将十分感激。

更新：一位Bootstrap社区成员提供了如下代码，使用原生Bootstrap类即可满足需求，无需修改CSS：

<div class="d-flex gap-3">
  <div class="flex-grow-1">
    <!-- 放入可变长度徽章和可变长度字符串 -->
  </div>
  <div class="flex-shrink-1">
    <!-- 放入Chevron按钮 -->
  </div>
</div>

内容的提问来源于stack exchange，提问作者dscl