Auto Adjust Div Height - html

Question

I want the div that's on the right side to match the height of the div that's on the left. The div on the right should always be the same height as the div on the left. The div on the left auto adjust its height. Both divs should always have the same height. A picture is worth a thousand words so please take a look at the picture below.
Here's the image that explains my problem.
http://i44.tinypic.com/24pcpwj.jpg
JSFIDDLE
http://jsfiddle.net/zFqNH/
HTML
<div style="width:1053px;">
<section id="inside" style="overflow: hidden; width:310px; float:right; border-left:0;">
<ul>
<p class="title">Funny</p>
<li class="list">
<img src="http://cdn.dashburst.com/wp-content/uploads/2013/01/Grumpy-Cat.jpg" width="100" height="67" style="float:left;padding-right:15px;" /></a>
<h3 style="font-size:20px;">Grumpy Cat</h3>
</li>
</ul>
</section>
<section id="inside">
<h2 class="subheading">Grumpy Cat<br/><p style="font-size:14px; margin-top:0px; font-weight:normal;"></p></h2><h2 style="border-bottom: 1px solid #dddddd; padding-top:10px;"></h2>
<p class="section"></p>
<img src="http://cdn.dashburst.com/wp-content/uploads/2013/01/Grumpy-Cat.jpg" border="0" style="display:block; margin: 0 auto;" height="396" width="700">
<br/>
<img src="http://cdn.dashburst.com/wp-content/uploads/2013/01/Grumpy-Cat.jpg" border="0" style="display:block; margin: 0 auto;" height="396" width="700">
<br/>
<img src="http://cdn.dashburst.com/wp-content/uploads/2013/01/Grumpy-Cat.jpg" border="0" style="display:block; margin: 0 auto;" height="396" width="700">
<br/>
</div></div></section>
CSS
#inside {
width:700px;
border-right: 1px solid #dddddd;
border-left: 1px solid #dddddd;
min-height: 600px;
overflow: hidden;
padding-bottom:15px;
}
.title{
width:300px;
padding-top:3px;
padding-bottom:7px;
color:#fff;
height:20px;
margin-top:125px;
background:#2c2c2c;
font-size: 18px;
}
.section{
padding-left:30px;
padding-bottom:15px;
margin-bottom: 1px;
font-size: 28px;
color: #657B83;
}
.subheading {
background:#fff;
font-size:50px;
height:100px;
position: relative;
}
.bottom {
border-top: 1px solid #dddddd;
border-right: 1px solid #dddddd;
padding-top: 20px;
text-align: center;
padding-bottom: 10px;
width:1053px;
position:relative;
margin: 0 auto;
font-size:15px;
color: #fff;
}
.list{
width:300px;
border-bottom: 1px solid #dddddd;
padding-bottom:10px;
display: inline-block;
margin-top:20px;
}

Answer 1

Insert JavaScript below the two divs and use document.getElementById to get the height of the left div, then use document.getElementById to change the height of the right div.
<script>
var height = document.getElementById('div1').style.height;
document.getElementById('div2').style.height = height;
</script>
Documentation:
http://www.w3schools.com/jsref/prop_style_height.asp