title: CSS: Distribute <div>s or <li>s vertically with even space
body: <p>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:</p>
  
  <p><img src="https://i.stack.imgur.com/ylnbn.png" alt="enter description here"></p>
  
  <p>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.</p>
  
  <p>So far I have ignored the graphic, and have tried various options to get the boxes aligned as I would like. </p>
  
  <p>Here is the best I have so far, which is approximate but still doesn't align as I want. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;span class="box-green"&gt;Line 1&lt;/span&gt;&lt;/li&gt;
  &lt;li&gt;&lt;span class="box-red"&gt;Second line of text&lt;/span&gt;&lt;/li&gt;
  &lt;li&gt;&lt;span class="box-yellow"&gt;3rd line&lt;/span&gt;&lt;/li&gt;
  &lt;li&gt;&lt;span class="box-blue"&gt;Even more text&lt;/span&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>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.</p>
  
  <p>I hope I've been able to explain the problem clearly.</p>