make equal height of all divs

HTML

<p class="result">e</p>	
<div class="product-wrapper contain">
		
<bR><bR><bR><bR><bR>
		<div class="all-same-height contain" id="ppp-1">
			
		</div>
		
		<div class="all-same-height contain" id="ppp-2">
			
			
		</div>
		
		<div class="all-same-height contain" id="ppp-3">
			
			
		</div>
		
	
		
	
		
	</div>

CSS

* {
    box-sizing: border-box;
}

.all-same-height {
    float: left;
}

.all-same-height img {
    width: 100%;
    height: 100%;
}
#ppp-1,#ppp-2,#ppp-3{ margin-left:10px;}
#ppp-1{width:100px; height:100px; border:red solid 1px;}
#ppp-2{width:200px; height:10px; border:green solid 1px;}
#ppp-3{width:50px;  height:50px; border:blue solid 1px;}

JavaScript

function equalHeight(groupHeight) {
    tallestHeight = 0;
    groupHeight.each(function() {
        thisHeight = $(this).height();
        if(thisHeight > tallestHeight) {
            tallestHeight = thisHeight;
        }
    });
    groupHeight.height(tallestHeight);
}
 
$(document).ready(function(){
    equalHeight($(".all-same-height"));    
});


function equalWidth(group) {
    tallestWidth = 0;
    group.each(function() {
        thisWidth = $(this).width();
        if(thisWidth > tallestWidth) {
            tallestWidth = thisWidth;
        }
    });
    group.width(tallestWidth);
     $('.result').text(tallestWidth);
}
 
$(document).ready(function(){
    equalWidth($(".all-same-height"));
});