title: Colspan alternative in <div> based structure
body: <p>I want to use <code>div</code> elements to create a table-like layout. </p>
  
  <p>What I want</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>.tableStyle td {
    background: red;
    color: #fff
  }
  
  .contentBox {
    min-height: 200px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table class="tableStyle" width="100%" cellspacing="10"&gt;
    &lt;tr&gt;
      &lt;td width="25%"&gt;
        &lt;div class="contentBox"&gt;One&lt;/div&gt;
      &lt;/td&gt;
      &lt;td width="25%"&gt;Two&lt;/td&gt;
      &lt;td width="50%" colspan="2"&gt;Three&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td colspan="2"&gt;
        &lt;div class="contentBox"&gt;Four&lt;/div&gt;
      &lt;/td&gt;
      &lt;td colspan="2"&gt;Five&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>What I have</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>.table {
    display: table;
    width: 100%;
    border-collapse: separate;
    border-spacing: 10px;
    color: #fff
  }
  
  .table .row {
    display: table-row;
  }
  
  .table .table-cell {
    display: table-cell;
    background: red;
    width: 50%;
  }
  
  .contentBox {
    min-height: 200px;
  }
  
  .table .smlCell {
    width: 25%;
  }
  
  .table .table {
    border-spacing: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="table"&gt;
    &lt;div class="row"&gt;
      &lt;div class="table-cell"&gt;
        &lt;div class="table"&gt;
          &lt;div class="row"&gt;
            &lt;div class="table-cell smlCell"&gt;
              &lt;div class="contentBox"&gt;One&lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="table-cell smlCell"&gt;
              Two
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="table-cell"&gt;Three&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
      &lt;div class="table-cell"&gt;
        &lt;div class="contentBox"&gt;Four&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="table-cell"&gt;Five&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I want to have equal spacing between the cells marked "One" and "Two".</p>
  
  <p>I also want all cells in a row to be of same height.</p>
  
  <p>After searching on net, I know that there are some limitations or issues 
  for <code>display: table</code> such as a lack of colspan/rowspan equivalents which may help what I'm trying to accomplish.</p>
  
  <p>Is there anyway (apart form <code>&lt;table&gt;</code>) to create this?</p>