如何拉伸垂直div元素以填充父容器？

Question

I have the following JS Bin

<div class="container">
  <div class="column">
    <div class="cell">Top left</div>
    <div class="cell">Top left bottom</div>
  </div>
  <div class="column">
    <div class="cell">Center</div>
  </div>
  <div class="column">
    <div class="cell">Top right</div>
    <div class="cell">Top right bottom</div>
  </div>
</div>

How can I make vertical aligned divs without explicit setting of height and position to absolute to look like the following:

EDIT: Please don't suggest me using of tables because I need to resolve my problem in the example above.

Answer 1

How about using CSS tables with your current markup:

FIDDLE

CSS

.container {
    display: table;
}

.column {
    display: table-cell;
    vertical-align: top;
}

.cell {
    border: 1px solid #000;
    width: 100px;
    font-size: 13px;    
}
.column:nth-child(2)
{
    border: 1px solid #000;
}
.column:nth-child(2) .cell
{
    border: none;
}

Answer 2

Add this to your stylesheet:

.column:nth-child(2) .cell {
    padding-bottom: 18px;
}

DEMO