Same height for table-rows using CSS

Question

I have N rows of content that user should match using drag and drop (user moves items on the right to the corresponding item on the left). Here is an example:

All blocks should have the same height - the height of the largest item. (In this example the larges item is on the left, #2). Is it possible to do using pure CSS? I can't use flexbox due to browser support. I have managed to implement this using JS, but I don't like that solution :)

Maybe someone could point me to the technique or a similar example?

Thanks in advance.

Answer 1

Try this jquery code it detects the biggest element and sets all of them to that height.

var height = 0;
$(".table").find(".table-cell").each(function() {
    height = Math.max(height, $(this).height());
});

$(".table").find(".table-cell").css("height", height);

Here is a JSfiddle example.

You need jquery for this so make sure adding the jquery library to your code.