Align a set of elements that are not next to each other in the HTML

Question

I am creating a comparison table where the columns are built as below:

<div id = "wrapper">

<div id = "col1">
<div class = "row1">
 text
 lots more text
 and more text
</div>
<div class = "row2">
 text
</div>
<div class = "row3">
 text
</div>
</div>

<div id = "col2">
<div class = "row1">
  text
</div>
<div class = "row2">
  a  
  lot
  of

  text
</div>
<div class = "row3">
  text
</div>
</div>

</div>

Col1 and col2 are then displayed as an inline-block so they visually sit next to each other on the page.

The problem is that the contents of each row may vary. Without setting a min-height of each row, how could i make sure that each row visually lines up with its corresponding row from the other column?

I can't think of any way to achieve this in CSS alone. I'm wondering if there's some sneaky jQuery way of achieving this?

EDIT: I Can't change the HTML structure.

Answer 1

Thanks for the help guys, in the end i found the answer here

jQuery Set Height of Element to Highest in the group

Im now looploopign through the elements in question like so

// Set options
var height = 0;
var element_wrap = ".compare-items-wrapper";
var element_search = ".financial_annual_fees";

// Search through the elements set and see which is the highest.
jQuery(element_wrap).each(function () {
    jQuery(this).find(element_search).each(function () {
        if (height < jQuery(this).height()) height = jQuery(this).height();
    });

    //alert("Block Height: " +height);

    // Set the height for the element wrap.
    jQuery(element_search).css("height", (height+10) + "px");

    // Unset height
    height = 0;
});