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