Align a set of elements that are not next to each other in the HTML
- by user1917727
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
