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.

Cheers