Columns side by side not horizontally aligned in outlook

[Fkarsum891]

Hello

I have been trying the below code to generate three columns side by side. but as the img shows outlook is not aligned them horizontally. Same issue with just two columns and the code snippet from the site.

outlook version: 16.0.5032.1000:

<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="all:unset;opacity:0;">
  <tr>
<![endif]-->
<!--[if false]></td></tr></table><![endif]-->
<div style="display:table;width:100%;border: 1px solid #000000;margin-top:50px;text-align:center;">
  <!--[if true]>
  <td width="10%">
<![endif]-->
<!--[if !true]><!-->
  <div style="display:table-cell;width:10%">
<!--<![endif]-->
    Column 1 content
<!--[if true]>
  </td>
<![endif]-->
<!--[if !true]><!-->
  </div>
<!--<![endif]--><!--[if true]>
  <td width="10%">
<![endif]-->
<!--[if !true]><!-->
  <div style="display:table-cell;width:10%">
<!--<![endif]-->
    Column 2 content
<!--[if true]>
  </td>
<![endif]-->
<!--[if !true]><!-->
  </div>
<!--<![endif]--><!--[if true]>
  <td width="10%">
<![endif]-->
<!--[if !true]><!-->
  <div style="display:table-cell;width:10%">
<!--<![endif]-->
    Column 3 content
<!--[if true]>
  </td>
<![endif]-->
<!--[if !true]><!-->
  </div>
<!--<![endif]-->
</div>
<!--[if true]>
  </tr>
</table>
<![endif]-->

[Fkarsum891]

Alright, did some more testing and it seems margin-top:50px is causing it