Html CSS文本位于div旁边列的右侧

我想显示一个用颜色填充的进度条，在右侧，我想以文本形式显示百分比

考虑到颜色的宽度根据百分比而变化

问题在正确的文本中。它不在灰色区域的右侧，而是在蓝色区域的右侧

到目前为止我所拥有的

我想要什么

.fill{
宽度：80%；
高度：35px；
背景#14cbeb；
}
#软工具{
颜色：白色；
背景：#0e8aa0；
}

例子
CSS
80%

以下使用引导类和组件

<div class="d-flex w-100 align-items-center">
  <span>Name</span>
  <div class="progress w-100">
    <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <span>20%</span>
</div>

名称
20%

风格相应

如果出于任何原因，您希望使用自己的自定义进度条，在两个跨距之间，将其嵌套在一个类为w-100（或宽度：100%）的div之间

名称
自定义进度条
20%

您可以结合使用：

例子
CSS
80%

你搞定了！我完全错过了clearfix。谢谢谢谢你的建议，但是@glhr刚刚做到了。谢谢你。

<div class="d-flex w-100 align-items-center">
  <span>Name</span>
  <div class="w-100">
    Custom Progress bar
  </div>
  <span>20%</span>
</div>

  <div class="text-white clearfix fill">
    <div id="soft-tool" class="float-left"><h5>CSS</h5></div>
    <div id="percent" class="float-right bg-light text-right">80%</div>
  </div>