多行文本时如何消除多余的空间

Question

我正在写一个徽章式的方块。

问题出在3 ^rd 块（1 (Something something)），如您在代码段中所见，它溢出到下一行，并在右侧留有多余的空间。

我应该怎么做才能摆脱那个空间？

如果它是纯CSS并且不涉及jQuery，那就太好了。

谢谢！

---

section {
  width: 8rem;
}

div {
  margin-top: 1rem;
}

.outer {
  background: blue;
  display: inline-flex;
  color: white;
  font-family: Helvetica, Arial, sans-serif;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  min-width: 32px;
}

<section>
  <div class="outer">
    1
  </div>

  <div class="outer">
    Very very very long Textttttt
  </div>

  <div class="outer">
    1 (Something something)
  </div>

  <div class="outer">
    Test
  </div>
</section>