I've been attempting to place the image and text next to each other, but I couldn't figure out how to make the image adjust its size (height & width) to fit into the table cell. Additionally, there seems to be extra space and the background color isn't fully applying at the end of the table. Here is an example: https://i.sstatic.net/m9Jun.png
When I tried running it in codepen, the color applied correctly. Am I missing something?
This is the snippet that I'm currently working on:
<table align="center" border="0" style="width: 100%; box-sizing: border-box; background: #0b3f90 0% 0% no-repeat padding-box;">
<tbody>
<tr style="width: 100%;">
<td style="background: #ffffff 0% 0% no-repeat padding-box; width: 10%; border: 1px solid rgb(0, 62, 117);">
<img alt="Head_Icn" src="https://i.picsum.photos/id/129/200/200.jpg?hmac=Y7ERTUfFi4RdOFkUcoOnX_xjWnsy4PA7pJkkFmaQt8c" style="padding: 3px 5px 2px; float: left; width: 46px; height: 50px;" />
</td>
<td style="width: 90%; text-align: left; font: normal normal 600 12px/20px Segoe UI; letter-spacing: 0px; color: #ffffff; opacity: 1; border: 1px solid rgb(0, 62, 117);"> Core Principles</td>
</tr>
</tbody>
</table>