javascript - multiple rows, different heights - equalize each row (JS) -

i have different rows 4 divs in it. have @ following snippet:

<div class="w-row">     <div class="w-col w-col-3">         <!-- lets assume image has height of 30px -->         <img src="myimage.png">     </div>     <div class="w-col w-col-3">         <!-- lets assume image has height of 40px -->         <img src="myimage.png">     </div>     <div class="w-col w-col-3">         <!-- lets assume image has height of 20px -->         <img src="myimage.png">     </div>     <div class="w-col w-col-3">         <!-- lets assume image has height of 60px -->         <img src="myimage.png">     </div> </div>  <div class="w-row">     <div class="w-col w-col-3">         <!-- lets assume image has height of 20px -->         <img src="myimage.png">     </div>     <div class="w-col w-col-3">         <!-- lets assume image has height of 40px -->         <img src="myimage.png">     </div>     <div class="w-col w-col-3">         <!-- lets assume image has height of 20px -->         <img src="myimage.png">     </div>     <div class="w-col w-col-3">         <!-- lets assume image has height of 30px -->         <img src="myimage.png">     </div> </div> 

i want equalize each row diffrently, in 1st w-row, container classes w-col w-col3 should height of maximum height of elements in it. in example, 1st 4 divs in w-row therefore should height of 60px each.

the 2nd 4 divs should height of 40px

usually use equalizer-function that, content rendered dynamically, there n elements , rows, can't number them through, since have use equalizer this:

equalizeheight("w-row w-col-3") // lead having columns have highest image-height of elements on page 

if use this:

equalizeheight("w-row w-row1"), i'd have call function `n` times, without knowing how many times has called.  

anyone idea / solution?

// update 1

link css-file webflow.css

the cleanest solution use flex-box. equalize heights without need "tablify" columns.

.flex-row{      display: -webkit-flex;      display: -ms-flexbox;      display: flex;      -webkit-flex-wrap: wrap;      -ms-flex-wrap: wrap;      flex-wrap: wrap;    }      .flex-col{     padding:5px;     display: -webkit-flex;     display: -ms-flexbox;     display: flex;    }     p{     background-color:black;     color:#fafafa;     padding:5px    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>  <div class="row flex-row">    <div class="col-xs-3 flex-col">        <p>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>      </div>      <div class="col-xs-3 flex-col">        <p>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>      </div>      <div class="col-xs-3 flex-col">        <p>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua</p>      </div>      <div class="col-xs-3 flex-col">        <p>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui offi</p>      </div>    </div>