html - Same height elements - bootstrap -

i make elements in list same height when 1 of them has more text in it, great if others adjust. have used divs have no problem change li, i'm looking advise how solve best way.

i using twitter-bootstrap, ilustrate issue have prepared example https://jsfiddle.net/f2vwvsgu/1/

<div class='container'>   <div class='row'>     <div class='col-sm-4 col-xs-12'>       <div class='img'>         <img src='http://lorempixel.com/image_output/nature-q-g-707-400-2.jpg' class='img-responsive' />       </div>       <div class='description'>         lorem ipsum dolor sit amet, consectetur adipiscing elit. phasellus sed commodo sapien, vitae congue velit.       </div>     </div>     <div class='col-sm-4 col-xs-12'>       <div class='img'>         <img src='http://lorempixel.com/image_output/nature-q-g-707-400-2.jpg' class='img-responsive' />       </div>       <div class='description'>         lorem ipsum dolor sit amet, consectetur adipiscing elit. phasellus sed commodo sapien, vitae congue velit.       </div>     </div>     <div class='col-sm-4 col-xs-12'>       <div class='img'>         <img src='http://lorempixel.com/image_output/nature-q-g-707-400-2.jpg' class='img-responsive' />       </div>       <div class='description'>         lorem ipsum dolor sit amet       </div>     </div>     <div class='col-sm-4 col-xs-12'>       <div class='img'>         <img src='http://lorempixel.com/image_output/nature-q-g-707-400-2.jpg' class='img-responsive' />       </div>       <div class='description'>         lorem ipsum dolor sit amet       </div>     </div>     <div class='col-sm-4 col-xs-12'>       <div class='img'>         <img src='http://lorempixel.com/image_output/nature-q-g-707-400-2.jpg' class='img-responsive' />       </div>       <div class='description'>         lorem ipsum dolor sit amet       </div>     </div>     <div class='col-sm-4 col-xs-12'>       <div class='img'>         <img src='http://lorempixel.com/image_output/nature-q-g-707-400-2.jpg' class='img-responsive' />       </div>       <div class='description'>         lorem ipsum dolor sit amet       </div>     </div>       </div> </div> 

doing in bootstrap or css without js possible flexbox-tweaks, need approach grid. check out css-flexbox, it's absolutely worth it.

to our problem, wrote short script desired result minimal markup-changes. need add:

<div class='container js-equalize-container'>  <div class='col-xs-4 js-equalize-target'> 

https://jsfiddle.net/685f822q/

a short explaination: script does: sets heights "auto", looks highest one, , applies height every element js-equalize-target-class.