I have this markup:

Code:
<div class="wrapper">
<article>A</article> <article>B</article> <article>C</article> <article>D</article> <article>E</article> <article>F</article> <article>G</article> <article>H</article>
</div>
which is floated and forms a two-column list. Each article has a variable height due to its contents.

What I want is each pair should have the same height based on which of the two has the tallest height. I have found variations of equalHeights plugin but all of them force equal heights to all elements. I just need each pair to be the same height, not all elements. Is this possible or are there any existing plugin for this?


Expected Sample output:

Code:
    |-------|---------|
    |   A   |    B    |
    |-------|---------|
    |       |         |
    |   C   |    D    |
    |       |         |
    |       |         |
    |       |         |
    |-------|---------|
    |       |         |
    |   E   |    F    |
    |       |         |
    |-------|---------|