-2

I want a vertical line just before the boxes in order to name those boxes in the y axis.

Here is my code:

<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>

Here is my output:

enter image description here

As you can see my picture, i want to have a vertical line with text on it, so please let me know how it can be done in my scenario.

I am looking for the vertical line in the left of the boxes in order to name it. Where the line must cover both the boxes in order to name the 2 boxes.

Quantum
  • 268
  • 5
  • 23

1 Answers1

1

You could apply a border-left style to the .rows container:

.rows {
  border-left: solid 1px red;
}

demo

tony19
  • 125,647
  • 18
  • 229
  • 307