Javascript 带徽章的引导多行按钮

我正在使用bootstrap进行一个项目，我试图找出如何获得一个显示以下内容的按钮： -文本左对齐（我认为这里向左拉是有意义的） -与数字右对齐的徽章（此处向右拉有意义）

这非常有效，但问题是我的大多数按钮的名称都非常适合双线按钮。一行上的所有内容看起来都很棒，但一旦文本过长或按钮太短，它就会将文本踢到另一行，顶部的文本看起来居中，而不是向左拉。这看起来不错：

<div style="width:300px;margin:10px">
    <button type="button" class="btn btn-primary btn-block" style="font-weight:bold;white-space:normal;">
        <span class="pull-left">Under Investigation </span><span class="badge pull-right">5</span>
    </button>
</div>

正在调查中5

这看起来很糟糕（按钮太窄，顶部的文本不能向左拉）：

正在调查中5

小提琴：

解决方案： 最后，我不得不将文本包装在另一个div中，这很好，而且在窗口调整大小时效果很好。文字变为两行，徽章保持在一行。最后，我将用适当的类来写这篇文章，但对于任何有类似问题的人，这里有一个解决方案：

<div class="col-sm-2">
    <button type="button" class="btn btn-primary btn-block" style="font-weight:bold;">
        <div class="pull-left" style="text-align:left;width:calc(100% - 30px);white-space:normal;overflow:hidden;">
            Under Investigation
        </div>
        <span class="badge pull-right" style="display:inline-flex;">5</span>
    </button>
</div>

正在调查中
5.

在该按钮上使用

文本对齐：左

button span.pull-left {
  text-align: left
}

---

尝试显示：内嵌flex；inline flex修复了徽章被踢到第三行的问题。尽管如此，这篇文章还是乱七八糟的。“正在调查”中的“正在调查”几乎居中，而“调查”则像应该的那样向左拉。您想要这样吗？它和col-md-2在一个网格列中。这一行有六个按钮。问题是，在它垂直捕捉所有内容之前，按钮变得太小，文本应该被踢到两行。非常感谢！最后用文本align:left将其包装在一个容器中。@user3060454太棒了！很高兴这有帮助。

button span.pull-left {
  text-align: left
}