Another solution to this could be making use of the old "column" idea. Stack them making two columns as such:
<section id = "leftColumn">
<div class="small">small</div>
<div class="medium">medium</div>
<div class="large">large</div>
</section>
<section id = "rightColumn">
<div class="xlarge">xlarge</div>
<div class="xlarge">xlarge</div>
<div class="xlarge">xlarge</div>
</section>
Then apply CSS on them as such :
div {
background-color:lime;
margin:2%;
display:block;
}
#leftColumn {
float:left;
display:inline-block;
width:50%;
}
#rightColumn {
float:left;
display:inline-block;
width:50%;
}
.small {height: 100px; }
.medium {height: 150px; }
.large { height: 200px; }
.xlarge { height: 300px;font-size:28px; }
This will give you the desired effect you are looking for.
See this here: http://jsfiddle.net/9YtDs/
Leon's answer is a good solution. However, since you are looking for an IE8 solution, I provided this answer.
NOTE: By default, the section tag doesn't work in IE8. However, there are ways you can make it work in IE8.
Kindly look at http://www.nickyeoman.com/blog/html/118-html5-tags-in-ie8 if you need help for that.
Hope this helps.