Home/ Questions/Q 8913665
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T04:31:13+00:00

I have this markup: <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>

  • 0

I have this markup:

<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?

Note: Can’t change the article markup because it’s outputted by the CMS.

My expected output:

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I have found a solution for this without changing the markup: http://css-tricks.com/equal-height-blocks-in-rows/

    • 0