There are two divas with different heights (1).
It is necessary to make so that their height was equal to the smallest of them (2).
Is it possible to actually implement this without js? Example

  • That is, make the column equal height? Or where did the piece of the first column go in the second figure? - Qwertiy ♦
  • If these are lowercase / lowercase block elements, then the height will adjust to the content - what then to do with a large block? Crop content? And if block, then where does the unnecessary large height come from? - lexxl
  • And the smallest unit is always of different height or the same? If the same, then enough max-height. If different, then there should be JS. - higimo

1 answer 1

Possible thanks to display: flex CodePen

<div class="container"> <div class="one"></div> <div class="two"></div> </div> .container { border: 5px solid red; display: flex; .one, .two { width: 40%; background: #ccc; margin: 10px 20px; } .two { height: 400px; } }