I want to distribute 4 lines of text in boxes vertically and evenly across the length of a div whose height is set to 50% of the containing div (i.e. no fixed height). I want the layout to look like this:

![enter description here](https://i.stack.imgur.com/ylnbn.png)

According to the current plan there will be four of these boxes, but this may change in future so ideally the solution would allow for more or less than four. I would like a CSS only solution if possible.

So far I have ignored the graphic, and have tried various options to get the boxes aligned as I would like. 

Here is the best I have so far, which is approximate but still doesn't align as I want. 

```css
.box-green, .box-red, .box-yellow, .box-blue{
  padding:7px;
  width:100%;
}

.box-green {
  background-color:green;
}

.box-red {
  background-color:red;
}

.box-yellow {
  background-color:yellow;
}

.box-blue {
  background-color:blue;
}

div {
  background-color:grey;
  height:50%;
  margin: auto 10% auto auto;
  position: absolute;
  right:0;
  text-align:right;
  top:50%;
  transform:translateY(-50%);
}

ul {
  display:table;
  height:100%;
}

li {
  display:table-row;
  width:100%;
}
```

```html
<div>
<ul>
<li><span class="box-green">Line 1</span></li>
<li><span class="box-red">Second line of text</span></li>
<li><span class="box-yellow">3rd line</span></li>
<li><span class="box-blue">Even more text</span></li>
</ul>
</div>
```

I will then need to add some sort of table formatting, I guess, to each row in order to distribute the graphic and text appropriately.

I hope I've been able to explain the problem clearly.