Responsive HTML Email Tables Not Appearing Correctly in Outlook - responsive-design

Question

I'm going to commit the cardinal internet sin and request something of you before I've contributed myself so in advance, please accept unreserved apologies.
But in my defence Outlook is making me suffer.
Here's my code:
<table class="100p" border="0" cellpadding="0" cellspacing="0" width="600" id="templateColumns" >
<tr>
<td align="center" valign="top">
<table align="left" border="0" cellpadding="10" cellspacing="0" width="300" class="templateColumnContainer">
<tr>
<td class="leftColumnContent">
<img class="emailImage" src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" />
</td>
</tr>
<tr>
<td valign="top" class="leftColumnContent">
<h1>Left Column</h1>
Lorem ipsum dolor sit amet.
</td>
</tr>
</table>
<table align="right" border="0" cellpadding="10" cellspacing="0" width="300" class="templateColumnContainer">
<tr>
<td class="rightColumnContent">
<img class="emailImage" src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" />
</td>
</tr>
<tr>
<td valign="top" class="rightColumnContent">
<h1>Right Column</h1>
Lorem ipsum dolor sit amet.
</td>
</tr>
</table>
</td>
</tr>
</table>
<br>
My problem is that in browser and within email clients other than Outlook the table's content is displayed in line or stacked depending on screen size.
However this is not the case in Outlook. My 'Right Column' is displayed below my 'Left Column' and aligned to the right.
What can I do to bring Outlook in line?
Thanks and sorry again if this is a reoccurring question, I appreciate it can be irritating!
Joseph

Answer 1

You have both tables in one column. End the first table with a </td><td> to separate the 2 tables into different columns
<table class="100p" border="0" cellpadding="0" cellspacing="0" width="600" id="templateColumns" >
<tr>
<td align="center" valign="top">
<table align="left" border="0" cellpadding="10" cellspacing="0" width="300" class="templateColumnContainer">
<tr>
<td class="leftColumnContent">
<img class="emailImage" src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" />
</td>
</tr>
<tr>
<td valign="top" class="leftColumnContent">
<h1>Left Column</h1>
Lorem ipsum dolor sit amet.
</td>
</tr>
</table>
</td>
<td>
<table align="right" border="0" cellpadding="10" cellspacing="0" width="300" class="templateColumnContainer">
<tr>
<td class="rightColumnContent">
<img class="emailImage" src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" />
</td>
</tr>
<tr>
<td valign="top" class="rightColumnContent">
<h1>Right Column</h1>
Lorem ipsum dolor sit amet.
</td>
</tr>
</table>
</td>
</tr>
</table>
<br>