Responsive table: 2 column table with l+r images...shrink it? - html

Question

I have a two column structure. The left holds the left side of one image, and the right holds the right side of the same image. I do this so that a user can click on the left to be directed one place, and the right to be directed another place.
Here's what it looks like:
CSS
<style type="text/css">
body {width: 100%; background-color: #ffffff; margin:0; padding:0; -webkit-font-smoothing: antialiased;font-family: Georgia, Times, serif}
table {border-collapse: collapse;}
table.fixed { table-layout:fixed; }
table.fixed td { overflow: hidden; }
#media only screen and (max-width: 640px) {
body[yahoo] .deviceWidth {width:440px!important; padding:0;}
body[yahoo] .center {text-align: center!important;}
}
#media only screen and (max-width: 479px) {
body[yahoo] .deviceWidth {width:280px!important; padding:0;}
body[yahoo] .center {text-align: center!important;}
}
</style>
HTML
<table width="580" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor="#ffffff">
<tr>
<td class="center" style="padding:0px 0 0 0px">
<table width="50%" border="0" cellpadding="0" cellspacing="0" align="left" class="deviceWidth">
<tr>
<td style="padding: 0px 0px 12px 0px" align="center">
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0"><img width="290" src="blah" alt="" border="0" style="width: 290px" class="deviceWidth" /></td>
</td>
</tr>
</table>
<table width="50%" border="0" cellpadding="0" cellspacing="0" align="right" class="deviceWidth">
<tr>
<td style="padding: 0px 0px 12px 0px" align="center">
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0"><img width="290" src="blah2" alt="" border="0" style="width: 290px" class="deviceWidth" />
</td>
</tr>
</table>
</td>
</tr>
</table>
The issue is...I want to make it responsive. But instead of stacking one table on top of the other, I want them to shrink side-by-side so that the image is preserved. How can I achieve this?
EDIT:
Here's a fiddle:
http://jsfiddle.net/54c5W/
I'd like the images to remain side-by-side when I shrink the screen, not stack on top of each other.