Slight modification to a drupal page template

I have a wrapper div. Inside it are a left div and a right div, both of which hold an image. Positioned over the left div is an icon png and text pulled from the database. <div id="wrapper"> <div id="left"> <!-- 500px wide --> <img src="[login to view URL]" /> <div id="logo"> <img src="[login to view URL]" /> </div> <div id="caption"> <h1>Caption Here</h1> </div> </div> <div id="right"> <!-- 700px wide --> <img src="[login to view URL]" /> </div> </div> When viewed on a cellphone, the left div appears above the right div. My problem is that the two images don't enlarge at the same rate.... when I enlarge my browser, the left image does not keep the same height as the right image. Together they are supposed to appear as one image, seamlessly. This was my solution because I needed to blur the left side, and wasn't able to code the page to do that without breaking the image up into two. I'm looking for someone to make those 2 images be equal height no matter what the screen size is. I don't have the liberty of hours and hours to figure this one out.