Equivalent to rowspan layout tricks without using HTML tables

Question

I've got a simple two column layout with two 'div' blocks in the right column.

Is there any way to achieve such a layout without using tables?

I've seen solutions that use absolute positioning, but this raises issues of its own.

td { border-width: 1; border-style: solid; }

<table>
  <tr>
    <td rowspan='2'>Left</td> <td>Right top</td>
  </tr>
  <tr>
    <td>Right bottom</td>
  </tr>
</table>

Answer 1

I went the CSS tables route:

.container {
  display: table;
  /* arbitrary width */
  width: 300px;
}

.col {
  display: table-cell;
  vertical-align: middle;
  padding: 2px;
}

.col-left {
  margin-right: 2px;
}

.col-left .col-inner {
  line-height: 44px;
}

.col-inner {
  padding: 2px;
  border: 1px solid #000;
}

.col-inner + .col-inner {
  margin-top: 2px;
}

<div class="container">
  <div class="col col-left">
    <div class="col-inner">
      Left
    </div>
  </div>
  <div class="col col-right">
    <div class="col-inner right-top">
      Right Top
    </div>
    <div class="col-inner right-bottom">
      Right Bottom
    </div>
  </div>
</div>