Same height for table rows using CSS

Question

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

All blocks must have the same height - the height of the largest element. (In this example, the large element is on the left, No. 2). Is it possible to use pure CSS? I cannot use flexbox because of browser support. I managed to implement this using JS, but I don't like this solution :)

Can someone point me to a technique or similar example?

Thanks in advance.

Answer 1

Try this jquery code, it detects the largest 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 be sure to add the jquery library to your code.