Css 引导4列表组项目，右侧有箭头

我正在使用Bootstrap4，我需要创建一个列表组，该列表组的右侧有一个标题和一个箭头

我马上就知道了：

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h3 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Title 1
        </button>
      </h3>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Content here
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Title 2
        </button>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        Content here
      </div>
    </div>
  </div>
</div>

标题1
满足于此
标题2
满足于此

但我需要更像这样的东西：

---

您可以使用

fontawesome

添加箭头，并使其

float:right

.accordion.card头{
填充：0；
}
.accordion.card header.btn链接{
显示：块；
填充：.75雷姆1.25雷姆；
宽度：100%；
文本对齐：左对齐；
}
.accordion.card header.btn link.fas{
浮动：对；
边缘顶部：5px；
}
.accordion.card header.btn链接[aria expanded=“true”].fas{
变换：旋转（90度）；
}

标题1
满足于此
标题2
满足于此