html email table element not inline in outlook - html

Question

I have a email template table with another table inside it for a two column width style layout. Problem is that the table is rendering correctly in all but outlook 365. What's weird is that in outlook online it renders out fine. I'm completely stumped and need some help.
Code is:
<table align="center" border="0" cellpadding="0" cellspacing="0" class="wrapper" style="background-color: #414d7e;" width="600"><!--section-5-->
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<table align="left" border="0" cellpadding="0" cellspacing="0" class="break2" style="background-color: #ffffff; border-collapse: collapse;" width="296">
<tbody>
<tr>
<td><img src="https://admin.gurgl.co.uk/site_assets/warwick_windows/images/warwick-installed-vertical-window.jpg" style="margin: 0; border: 0; padding: 0; display: block; vertical-align: middle;" /></td>
</tr>
</tbody>
</table>
<table align="left" border="0" cellpadding="0" cellspacing="0" class="break2" width="296" style="border-collapse: collapse;">
<tbody>
<tr>
<td width="25"><img alt="" height="1" src="https://admin.gurgl.co.uk/site_assets/warwick_windows/images/spacer.gif" title="" width="1" /></td>
<td valign="top">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td height="10"><img alt="" height="1" src="https://admin.gurgl.co.uk/site_assets/warwick_windows/images/spacer.gif" title="" width="1" /></td>
</tr>
<tr>
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="left" class="editable" data-selector="td.editable" style="font-family: 'Arial', sans-serif; font-size: 23px; color: #ffffff; line-height: 1.1; padding-top: 10px;">Our Vertical Sliders include</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="20"><img alt="" height="1" src="https://admin.gurgl.co.uk/site_assets/warwick_windows/images/spacer.gif" title="" width="1" /></td>
</tr>
<tr>
<td><img alt="" height="3" src="https://admin.gurgl.co.uk/site_assets/warwick_windows/images/white-line.jpg" title="" width="30" /></td>
</tr>
<tr>
<td class="editable" data-selector="td.editable">
<ul style="padding-top: 20px; margin-top: 2px; color: #ffffff; font-family: 'Arial', sans-serif; sans-serif; font-size: 16px; color: #ffffff; line-height: 26px; list-style-type: none;">
<li>• 10 Day turn around</li>
<li>• 10% off your first order</li>
<li>• 7 Colours from stock</li>
<li>• Timeless Elegance looks</li>
<li>• Built in Security bar</li>
<li>• Made in our Sheffield Factory</li>
</ul>
</td>
</tr>
<tr>
<td height="15"><img alt="" height="1" src="https://admin.gurgl.co.uk/site_assets/warwick_windows/images/spacer.gif" title="" width="1" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td width="20"><img alt="" height="1" src="https://admin.gurgl.co.uk/site_assets/warwick_windows/images/spacer.gif" title="" width="1" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" class="break2" style="background-color: #ffffff;" width="600">
<tbody>
<tr>
<td height="100" style="width: 100%; display: block; font-family: Arial, sans-serif; font-size: 26px; text-align:center;" width="600">We match any like for like quote</td>
</tr>
<tr>
<!--[if mso]>
<td align="center">
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.warwicktradewindows.co.uk/products.php?cat=118" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="0%" stroke="0" fillcolor="#414d7e">
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">
Read more
</center>
</v:roundrect>
</td>
<![endif]-->
<![if !mso]>
<td style="width: 100%; display: block; font-family: Arial, sans-serif; font-size: 19px; text-align:center;" width="600">Read more</td>
</td>
<![endif]>
</tr>
<tr>
<td height="30"><img alt="" height="1" src="https://admin.gurgl.co.uk/site_assets/warwick_windows/images/spacer.gif" title="" width="1" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
<!--section-5--end-->
</tbody>
Fiddle is here: https://jsfiddle.net/fsc71og6/