I'm a marketer who dabbles in code to create email newsletters with drag and drop elements. For a new template I want to create a specific layout header but when I use the code below it lays out weird in the mobile version of the email. The social icons are all centered UNDER the "Join our online community" text. I can only use inline CSS to do this.
Can you help me fix this please?
<table style="width: 100%; font-size: 12px; font-family: Arial;" cellpadding="8"><tbody><tr style="height: 26px;"><td style="width: 69.7631%; height: 26px;"><span style="color: #ffffff;">Join our online community</span></td><td style="width: 7%; height: 26px;"><a href="https://www.facebook.com/unicollege" target="_blank" rel="noopener"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://emma-assets.s3.amazonaws.com/31sab/4f59667a77a167ed598590b3bfca4b54/facebooksmall.png" alt="" width="14" height="14" /></a></td><td style="width: 7%; height: 26px;"><a href="https://www.instagram.com/unicollege_sa/" target="_blank" rel="noopener"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://emma-assets.s3.amazonaws.com/31sab/bb1635c88e5a0605763fc225905713ef/instagramsmall.png" alt="" width="14" height="14" /></a></td><td style="width: 7%; height: 26px;"><a href="https://www.linkedin.com/school/unicollege/" target="_blank" rel="noopener"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://emma-assets.s3.amazonaws.com/31sab/ef924cfcf68607be45492c5aba69ab56/linkedinsmall.png" alt="" width="14" height="14" /></a></td></tr></tbody></table>