title: CSS selector: how to make 2 spans each fill 50% of their parent's width?
body: <p>This doesn't works:</p>
  
  <p><strong>Given an HTML such:</strong></p>
  
  <pre><code>&lt;body&gt;
  &lt;div class="list"&gt;
      &lt;span class=" level"&gt;hello&lt;/span&gt;
      &lt;span class="logic-english"&gt;world!&lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="list"&gt;
      &lt;span class=" level"&gt;Or should&lt;/span&gt;
      &lt;span class="logic-english"&gt;I say....&lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="list"&gt;
      &lt;span class=" level"&gt;something else&lt;/span&gt;
      &lt;span class="logic-english"&gt;such as...&lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="list"&gt;
      &lt;span class=" level"&gt;Goodbye&lt;/span&gt;
      &lt;span class="logic-english"&gt;world!&lt;/span&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>a CSS such:</strong></p>
  
  <pre><code>body { width: 100%; }
  .list { border: 1px solid #333; margin: 3px; }
  
  .list { font-size: 0.8em; min-width: 50% ; display: inline; }
  .list:nth-child(4n+3), .list:nth-child(4n+4) { background: #FFAAAA; width: 100%; }
  </code></pre>
  
  <p><strong><a href="http://jsfiddle.net/4zddx/9/" rel="nofollow">Demo fiddle here</a></strong>.</p>
  
  <p>Also, <strong>how to make my 2 spans each fill 50% of their parent's width ?</strong></p>