I have two div tags. The first one adjusts its height automatically according to the content inside, while the second one has a fixed height and contains the gmaps.js plugin for displaying Google maps. Without specifying a height for the second div, the map does not appear. Is there a way to make both divs have the same height at all times, even when resizing the window?
Here is the JSfiddle link: https://jsfiddle.net/ntq3xp6b/
CODE SNIPPET FROM JS FIDDLE
<div class="left">
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
</div>
<div class="right"></div>
CSS STYLES
.left{
display:block;
width:49.9%;
float:left;
background-color:red;
}
.right{
display:block;
width:49.9%;
float:left;
background-color:blue;
height:300px;
}