jQuery Responsive Equal Height Per 2 Coulmns

JavaScript
1

I have this markup:

<div class="wrapper">[INDENT]<article>A</article>
        <article>B</article>
        <article>C</article>
        <article>D</article>
        <article>E</article>
        <article>F</article>
        <article>G</article>
        <article>H</article>[/INDENT]
    </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:


    |-------|---------|
    |   A   |    B    |
    |-------|---------|
    |       |         |
    |   C   |    D    |
    |       |         |
    |       |         |
    |       |         |
    |-------|---------|
    |       |         |
    |   E   |    F    |
    |       |         |
    |-------|---------|
2

The best solution here may be to adjust your markup to represent the intended organisation of the page, by placing a section around each pair of articles.


<div class="wrapper">
    <section>
        <article>A</article>
        <article>B</article>
    </section>
    <section>
        <article>C</article>
        <article>D</article>
    </section>
    <section>
        <article>E</article>
        <article>F</article>
    </section>
    <section>
        <article>G</article>
        <article>H</article>
    </section>
</div>
3

It’s impossible for me to change the markup.

It comes from a CMS and all it output is:

<article>.....</article>
4

You’re in luck then, for scripting can very easily adjust the markup in that kind of way.