Column Layout with variable height DIVs

Example of a multi-column DIV layout that will float left to right but also allow variable-height DIVs.

HTML

NO!
<div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

<div style="clear: both; height: 50px;"></div>

MUCH BETTER!
<div class="wrapping-divs">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

CSS

div > div {
    background-color: lightgray;
    width: 50%;
    float: left;
    border: 1px solid white;
    box-sizing: border-box;
    height: 100px;
    text-align: center;
}

/* Add some variable height items */
div > div:nth-child(2n+4) {
    background-color: red;
    height: 40px;
}
div.wrapping-divs > div:nth-child(odd) {
    clear: both;
}