I want to use `div` elements to create a table-like layout. 

What I want

```css
.tableStyle td {
  background: red;
  color: #fff
}

.contentBox {
  min-height: 200px;
}
```

```html
<table class="tableStyle" width="100%" cellspacing="10">
  <tr>
    <td width="25%">
      <div class="contentBox">One</div>
    </td>
    <td width="25%">Two</td>
    <td width="50%" colspan="2">Three</td>
  </tr>
  <tr>
    <td colspan="2">
      <div class="contentBox">Four</div>
    </td>
    <td colspan="2">Five</td>
  </tr>
</table>
```

What I have

```css
.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;
}
```

```html
<div class="table">
  <div class="row">
    <div class="table-cell">
      <div class="table">
        <div class="row">
          <div class="table-cell smlCell">
            <div class="contentBox">One</div>
          </div>
          <div class="table-cell smlCell">
            Two
          </div>
        </div>
      </div>
    </div>
    <div class="table-cell">Three</div>
  </div>
  <div class="row">
    <div class="table-cell">
      <div class="contentBox">Four</div>
    </div>
    <div class="table-cell">Five</div>
  </div>
</div>
```

I want to have equal spacing between the cells marked "One" and "Two".

I also want all cells in a row to be of same height.

After searching on net, I know that there are some limitations or issues 
for `display: table` such as a lack of colspan/rowspan equivalents which may help what I'm trying to accomplish.

Is there anyway (apart form `<table>`) to create this?