Why is my image in email template not properly aligned?

Question

How can I fix my margin and padding section in the email template to properly align my images in different columns?

I have inserted a full image and also partial code below. Thank you.

 <tr> <td valign="top" align="middle" > <table border="0" cellpadding="0" cellspacing="0" width="100%; background-color: #ffffff; padding; 20px;"> <tr> <td bgcolor="#ffffff" style="display: inline-block; max-width: 270px; width: 100%;" align="center"> <img src="https://i.postimg.cc/sgw9MVx8/jug.png" alt="" style="max-width: 268px; width: 100%" border: 1px solid: #d5d5d5 /> <h3 style="margin: 10px 0px; font-family: sans-serif; font-size: 20px; color: #000000" > Jug </h3> <p style="margin: 0; font-size: 16px; color: #444444; margin-bottom: 10px; "> 10% discounts</p> </td> <td style="display: inline-block; max-width: 20px; width: 100%" > &nbsp; </td> <td bgcolor="#ffffff" style="display: inline-block; max-width: 270px; width: 100%;" align="center"> <img src="https://i.postimg.cc/CK9LqX9G/apple.jpg" alt="" style="max-width: 268px; width: 100%" border: 1px solid: #d5d5d5 /> <h3 style="margin: 10px 0px; font-family: sans-serif; font-size: 20px; color: #000000" > Apple </h3> <p style="margin: 0; font-size: 16px; color: #444444; margin-bottom: 10px; "> 10% discounts</p> </td> </tr> </table> </td> </tr>

Answer 1

Both Images resolution should be of the same size.