Question

I read about several different solutions to simulate equal-height columns or elements, but none of them really captured my attention because they were using hacks, incredibly complex HTML layouts or not widely supported attributes.

Here’s the example Fiddle.

My goal would be to make sure all the elements have the same height or, at least, the maximum height of the siblings in the row.

A row is composed by 3 elements (in this case, no row wrapper exists but I may consider to add such container element).

Is there a solution that:

1. doesn’t require JS
2. doesn’t use display: table
3. doesn’t use wide padding/margin with negative values
4. doesn’t require exponential uses of divs and float

Answer 1

With the restrictions you made: No, there isn’t.

edit: Because you didn’t mention this: You could use tables for this. (welcome back to the 90s)