Columns side by side not horizontally aligned in outlook

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. columns_issue

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]-->

M-J-Robbins / good-email-code

Columns side by side not horizontally aligned in outlook #11