I am trying to get both columns in the following code to equal each-other in height. I have tried CSS, but it will not work for a solution. I have tried javascript, and have come close:

HTML Code:
<div>

<div style="float:left; width:50%; min-width:300px;">
<div id="1" class="1" style="border:1px solid #CCC; border-radius:3px; margin-right:12.5px;">Content 1<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test</div>
<div style="margin-right:12.5px">Button 1</div>
</div>

<div style="float:right; width:50%; min-width:300px;">
<div id="2" class="2" style="border:1px solid #CCC; border-radius:3px; margin-left:12.5px;">Content 2<br>Test<br>Test<br>Test</div>
<div style=" margin-left:12.5px;">Button 2</div>
</div>

</div>

<script type="text/javascript">
<!--
var   a=document.getElementById("1");
var   b=document.getElementById("2");
if(a.scrollHeight<b.scrollHeight)
{
a.style.height=b.scrollHeight+"px";
}
else{
b.style.height=a.scrollHeight+"px";
}
-->
</script>
However, when the columns re-size with content, they left column (a) does not expand. I would also like to discover a way to only run the code on browsers larger than 640px in height. Can anyone help me? Thank you for your time and energy.