Put div next to div in phpmailer html - css

Question

I am trying to create the html structure of the phpmailer mailing and I want to send 3 divs side by side, but when I get the formatted email.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style='display: table; width: 60%'>
<div style='font-size: 1vw; background-color: whiteSmoke; text-align: center; padding: 1vw; position: relative;'><b>PEDIDO DE ASSISTÊNCIA</b></div>
<div style='display: flex; align-items: flex-start;'>
<div style='width: 38%;'>
<p><b>Cliente:</b> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p><b>Morada:</b> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p><b>Código Postal:</b> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p><b>Localidade:</b> xxxxxxxxxxxxxxxxxxx</p>
<p><b>Data do Pedido:</b> 21-11-2019</p>
</div>
<div style='width: 30%;'>
<p><b>Assistência Pedida Por:</b> xxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
<div style='width: 25%;'>
<p><b>Nº Contribuinte:</b> xxxxxxxxxxxxxxxx</p>
<p><b>Contacto:</b> xxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p><b>Email:</b> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
</div>
</div>
Here it works and on the html page, but when I send the email and receive it in Outlook it appears unconfigured, I will show in the image:
The divs are not side by side as in the example I put above.

Answer 1

You're trying to use both javascript and relatively recent CSS (flexbox) in HTML for email. It's not going to work.
HTML in email is very limited, especially in Outlook, which, along with gmail, offers a horribly outdated and second-rate experience. You need to keep your formatting very simple (yay, tables for layout!), and test everything across multiple devices using services like emailonacid and litmus.
Developing HTML for email is extremely unpleasant, but welcome, I guess!
Since your layout is trying to emulate a table, it's probably easier to just use a table:
<table style='width: 60%'>
<tr style='background-color: whiteSmoke; text-align: center; padding: 1em; position: relative;'>
<th colspan="3"><b>PEDIDO DE ASSISTÊNCIA</b></th>
</tr>
<tr>
<td style='width: 38%;'>
<p><b>Cliente:</b> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p><b>Morada:</b> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p><b>Código Postal:</b> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p><b>Localidade:</b> xxxxxxxxxxxxxxxxxxx</p>
<p><b>Data do Pedido:</b> 21-11-2019</p>
</td>
<td style='width: 30%;'>
<p><b>Assistência Pedida Por:</b> xxxxxxxxxxxxxxxxxxxxxxxxx</p>
</td>
<td style='width: 25%;'>
<p><b>Nº Contribuinte:</b> xxxxxxxxxxxxxxxx</p>
<p><b>Contacto:</b> xxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p><b>Email:</b> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</td>
</tr>
</table>