Laying out divs of different heights in a grid

I have a site that I'd like to layout like this image:

Red is the desktop version and yellow is the mobile version. I can easily switch between the two using media queries.

My problem is how to write the CSS for the desktop version - I only include the mobile version because the layout precludes some layout techniques for the desktop version.

The content within each pair (e.g. A and B) can be of different heights, but they're similar enough that I'd like to lay them out as equal heights so the next pairs headers li开发者_开发问答ne up.

The easiest way I guess is to hardcode the heights for each pair, but I'd rather avoid that if possible.

You should use a container for those elements.

for example a <ul> and the elements themselves be <li> elements.

example html

<ul class="container">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
    <li>F</li>
</ul>

desktop CSS

ul.container li{
  width:45%;
  margin-right:5%;
  float:left;
}

ul.container li:nth-child(odd){
  clear:left;
}

mobile CSS

ul.container li{
  width:100%;
}

Demo at http://jsfiddle.net/gaby/AgNjB/1

notice

The above code works if you only want to line-up their headers (the left and right tops are at the same place). But it will need alterations if you want their actual height to line up as well (for a bottom border for instance)..