title: How to divide space equally between two elements
body: <p>I have the following set up. It creates 3 groups of items, evenly distributed across the page. 
  But I can't get the last bit to work. 
  Where I have <code>.layeritem_inner</code> I want these to be divided evenly into two sections, but I can't get them to change size. 
  I have tried various combinations of <code>flex-xxx</code> and <code>width</code> but nothing seems to work. What am I missing?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code> #layerOneOuter
   {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
   } 
  
   .layerOneInner
   {
    width:18em;
    display: flex;
    flex-direction: column;
    border:solid black 2px;
    text-align:center;
   }
  
   .layeritem_column_header
   {
    flex-basis: auto;
    font-weight: bold;
    width:100%;
    background-color: #CFCFCF; 
    color: #000000;
   }
  
   .layeritem_column_row
   {
    flex-direction: row;
    padding-top: 5px;
    border:solid grey 1px;
    width:100%;
   } 
  
   .layeritem_inner
   {
    border:solid red 1px;
    width:5em;
   }
  
    </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;div id="layerOneOuter"&gt;
    &lt;div class="layerOneInner"&gt;
     &lt;span class="layeritem_column_header"&gt;This is a Header&lt;/span&gt;
     &lt;span class="layeritem_column_row"&gt;
      &lt;span class="layeritem_inner"&gt;Left Side&lt;/span&gt; &lt;!-- This row should take up 50% of the space --&gt;
      &lt;span class="layeritem_inner"&gt;Right Side&lt;/span&gt; &lt;!-- This row should take up 50% of the space --&gt;
     &lt;/span&gt;
     &lt;span class="layeritem_column_row"&gt;
      &lt;span class="layeritem_inner"&gt;Left Side&lt;/span&gt;
      &lt;span class="layeritem_inner"&gt;Right Side&lt;/span&gt;
     &lt;/span&gt;
    &lt;/div&gt;
    
    &lt;div class="layerOneInner"&gt;
     &lt;span class="layeritem_column_header"&gt;This is a Header&lt;/span&gt;
     &lt;span class="layeritem_column_row"&gt;
      &lt;span class="layeritem_inner"&gt;Left Side&lt;/span&gt; 
      &lt;span class="layeritem_inner"&gt;Right Side&lt;/span&gt; 
     &lt;/span&gt;
     &lt;span class="layeritem_column_row"&gt;
      &lt;span class="layeritem_inner"&gt;Left Side&lt;/span&gt;
      &lt;span class="layeritem_inner"&gt;Right Side&lt;/span&gt;
     &lt;/span&gt;
    &lt;/div&gt;
    
    &lt;div class="layerOneInner"&gt;
     &lt;span class="layeritem_column_header"&gt;This is a Header&lt;/span&gt;
     &lt;span class="layeritem_column_row"&gt;
      &lt;span class="layeritem_inner"&gt;Left Side&lt;/span&gt;
      &lt;span class="layeritem_inner"&gt;Right Side&lt;/span&gt;
     &lt;/span&gt;
     &lt;span class="layeritem_column_row"&gt;
      &lt;span class="layeritem_inner"&gt;Left Side&lt;/span&gt;
      &lt;span class="layeritem_inner"&gt;Right Side&lt;/span&gt;
     &lt;/span&gt;
    &lt;/div&gt;
   &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>