Resizable equal height columns

by roelvd

HTML

<div id="wrapper" class="table">

    <div class="row">
        <div class="column" style="width: 20%">
            <div class="container empty"></div>
        </div>
        <div class="column" style="width: 50%">
            <div class="container">
                <div class="element"><p>Text</p></div>
                <div class="element"><p>And more text. An complete paragraph actually.</p><p>And another one!</p></div>
                <div class="element"><p>And this is even more text.</p></div>
            </div>
        </div>
        <div class="column" style="width: 30%">
            <div class="container">
                <div class="element"><p>And this is even more text.</p></div>
            </div>
        </div>
    </div>

</div>

CSS

p {
    padding: 3px;
}

#wrapper {
    margin: 30px;
    width: 600px;
    outline: 2px solid grey;
}

.table {
    display: table;
    height: 100%;    
}

.row {
    display: table-row;
    height: 100%;
}

.row .column:not(:last-child) {
    border-right: 1px solid grey;
}

.row .column:not(:last-child) .container {
    padding-right: 5px;
}

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

.container {
    height: 100%;
    margin: 0;
}

.container.empty {
    background-color: yellow;
}