Сделать 2 относительных divs равной высоте?

Question

Я на мгновение ударился головой о стену. У меня есть эти 2 столбца, которые должны следовать друг за другом по высоте, поэтому они должны быть расположены относительно друг относительно друга, так как содержимое каждого столбца меняется, а иногда одно из них самое высокое, а иногда и наоборот. См JSFiddle ниже:

https://jsfiddle.net/eguxejfc/1/

<div class="wrapper"> 
    <div class="left"> 
    fsdfdsf 
    </div> 
    <div class="right"> 
    fsdfdsf 
    </div> 
    <div style="clear:both"></div> 
</div> 

Как сделать .right таким же высоким, как .left пока не превышая .wrapper?

Answer 1

Используйте flexbox, но не забудьте префикс поставщика.

.wrapper { 
 
    position: relative; 
 
    width:100%; 
 
    height: 300px; 
 
    background: yellow; 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 

 
.left { 
 
    flex: 0 0 65%; 
 
    background: red; 
 
    margin-left: 5%; 
 
} 
 

 
.right { 
 
    flex: 0 0 25%; 
 
    background: blue; 
 
    margin-right: 5%; 
 
}

<div class="wrapper"> 
 
    <div class="left"> 
 
    fsdfdsf 
 
    </div> 
 
    <div class="right"> 
 
    fsdfdsf 
 
    </div> 
 
    <div style="clear:both"></div> 
 
</div>

Answer 2

Вы можете сделать это с помощью JQuery:

<div class="wrapper"> 
<div class="left"> 
    fsdfdsf 
</div> 
<div class="right"> 
    fsdfdsf 
</div> 
<div style="clear:both"></div> 

Jquery:

$(document).ready(function(){ 
var height = 0; 
if($(".left").height() > $(".right").height()) { 
    height = $(".left").height(); 
    $(".right").height(height); 
}else{ 
    height = $(".right").height(); 
    $(".left").height(height); 
} 
}); 

DEMO: http://codepen.io/anon/pen/JXMpve