Multi-column auto height

by smikulic

HTML

<div class="container cf">
    <div class="column col1">
        <h2>Column 1</h2>
        <p>Lorem ipsum text1</p>
        <a class="bottom-element" href="">Action</a>
    </div>
    <div class="column col2">
        <h2>Column 2</h2>
        <p>Lorem ipsum text2, Lorem ipsum text2, Lorem ipsum text2, Lorem ipsum text2</p>
        <p>Lorem ipsum text2, Lorem ipsum text2, Lorem ipsum text2, Lorem ipsum text2
        Lorem ipsum text2, Lorem ipsum text2, Lorem ipsum text2, Lorem ipsum text2</p>
    </div>
</div>

CSS

.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
.container {
    outline: 1px solid black;
    display:table;
}
.column {
    display:table-cell;
    position: relative;
    padding: 4px;
    width: 50%;
}
.col1 { background: #48b5f9; }
.col2 { background: #edc682; }

.bottom-element {
    position: absolute;
    bottom: 15px;
    right: 15px;
}