There are 3 divs horizontally. The central unit expands with content down. Side blocks without content remain at the top. How to stretch them 100% with the central unit?

    1 answer 1

    http://jsfiddle.net/Qs6eA/1/

    var maxHeight = 0, $inlineDivs = $('.inline div'); $inlineDivs.each(function() { maxHeight = Math.max(maxHeight, $(this).height()); }); $inlineDivs.css('height', maxHeight); 
     .inline div { display: inline-block; width: 30%; background: orange; /* optional */ vertical-align: middle; } .inline div:first-child, .inline div:last-child { background: green; /* optional */ } 
     <div class='inline'> <div></div> <div> 1234 <br>1234 <br>1234 <br> </div> <div></div> </div>