Here's the code:

<!-- SPLIT ROW ARTICLE BLOCK -->
                  <table border="0" cellspacing="0" cellpadding="0" >

                    <tr>
                        <td style="background-color:#ba9a53; " >
                                <table border="0" cellspacing="0" cellpadding="20" >
                                    <tr>
                                        <td ><span style="font-size: 24px; color:#ffffff;">Jimmy Buffet’s<sup>&reg;</sup> Margaritaville<sup>&reg;</sup> News</span></td>
                                    </tr>
                                </table>
                        </td>

                        <td style="border-left:3px solid white;" >
                            <table border="0" cellspacing="0" cellpadding="0">
                                <tr>
                                    <td width="295" height="182">
                                    <div class="article-img" style="overflow:hidden; width:295px; height:182px;"><img width="350" height="216" border="0" style="display:block;" src="https://dl.dropboxusercontent.com/u/378233/DA-cropped.jpg" /></div>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr style="background-color:#ece3d0">
                        <td colspan="2">
                                <table border="0" cellspacing="0" cellpadding="20" style="border-bottom:5px solid #ba9a53">
                                    <tr>
                                        <td style="border-top:5px solid white; font-size:14px; line-height:20px;">The above title section on the left is HTML. The above picture on the right is in it's own cell.<br /><br />
                                        Keeping the row above in tact is not working well in a lot of clients. Lee and I suggest creating a full-width image for this area.<br /><br /> 
                                        <!-- Bulletproof button -->
                                        <div> 
                                                    <!--[if mso]>
                                  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="10%" strokecolor="#1e3650" fillcolor="#556270">
                                    <w:anchorlock/>
                                    <center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">LEARN MORE <span style="color:#ba9a53">&#x276f;</span></center>
                                  </v:roundrect>
                                <![endif]--><a href="#"
                                style="background-color:#254271;border:1px solid #1e3650;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:normal;line-height:30px;text-align:center;text-decoration:none;width:130px;-webkit-text-size-adjust:none;mso-hide:all;">LEARN MORE<span style="color:#ba9a53">&nbsp;&nbsp;&#9658;</span></a></div>
                                <!-- /bulletproof button -->
                                </td>
                                    </tr>
                                </table>
                        </td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                    </tr>
                  </table><!-- /split row article block-->
Here's a visual:

This is supposed to be a responsive design. The designer wants to maintain the split column layout (title on left/image on right) as the devices get smaller.

Is this possible?

At first he wanted to keep a 60/40 ration but said he'd be ok with a 50/50.

The problem I'm having is getting the image on the right to fill that cell.

Thanks!