你必须添加更多的CSS和HTML来做这件事，然后它是一个有点简单。才能让那些混蛋乖乖听话
在我的代码中，你可以看到我将数字和字符 Package 在一个新的div中，以便将它们正确地与其他的对齐。

<div class="container">
            <div class="row noMargin">
                <div class="col">
                  <div class="number">
                    5
                  </div>
                  <div class="text">
                    S
                  </div>
                </div>
                <div class="col">
                  <div class="number">
                    1
                  </div>
                  <div class="text">
                    W
                  </div>
                </div>
            </div>
            <div class="row noMargin">
                <div class="col">
                  <div class="number">
                    3
                  </div>
                  <div class="text">
                    O
                  </div>
                </div>
                <div class="col">
                  <div class="number">
                    0
                  </div>
                  <div class="text">
                    T
                  </div>
                </div>
            </div>
        </div>

我使用css的'+'选择器和：first-child选择器来定位正确的div，而不给它们指定特定的类。这些运算符解释为here

.noMargin {
  margin: 0px;
}
.row {
  display: flex;
}
/* Select second row (following on other row) */
.row + .row {
  border-top: 1px solid grey;
} 
.row .col {
  padding: 10px 20px;
  width: 50%;
  display: flex;
  flex-direction: column;
}
.row .col + .col {
  border-left: 1px solid grey;
}

.row .col + .col .number {
  align-self: flex-end;
}

.row .col:first-child .text {
  align-self: flex-end;
}

你还需要添加颜色。