VueJS-如何在框前有一条垂直线，以便使用HTML/CSS进行命名

我想要一条垂直线正好在框之前，以便在y轴上命名这些框

这是我的密码：

<div class="rows" v-if="this.system == 'cpu'">
          <div class="columns is-mobile">
            <div class="column  is-2">box a</div>
            ...
          </div>

          <div class="columns is-mobile">
            <div class="column is-2">box b</div>
            ...
          </div>

方框a
...
方框b
...

以下是我的输出：

正如你们看到我的图片，我想有一个垂直线，上面有文字，所以请让我知道如何在我的场景可以做到这一点

我正在寻找方框左侧的垂直线，以便命名它。行必须覆盖两个框才能命名这两个框。

您可以将样式应用于

。行

容器：

.rows{
左边框：实心1px红色；
}

---

你能粘贴一张你想做的图片吗？垂直线在哪里？左边正确的？中间的每个文本框？也许不是？问题很不清楚，就在方框前，也就是在左边，我想加一条垂直线