How to add an image to the left of a 2 row table in HTML

Question

I'm trying to help a client create an email signature but my HTML skills are very rudimentary. I'm trying to get his logo to the left of the signature while to the very right is a row of social icons, as well as a calendly link just below the icons. I tried wrapping everything in a table, and then nesting another table for the social icons and calendly link but the logo always appears on its own row. Or the logo and social icons appear on the same row, but the calendly link is on a separate row so there's a big gap between the social icons and the calendly link.

Here's what I have:

<table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial; width: 100%;">
<tbody>
    <tr>
        <td style="text-align: left; vertical-align: top;">
            <img src="https:logo.png" role="presentation" width="300" height="85" class="sc-cHGsZl bHiaRe" style="max-width: 300px;">
            </td>
            <td style="text-align: right; vertical-align: top;">
                <table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial; display: inline-block;"
                    <table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial; display: inline-block;">
                        <tbody>
                            <tr style="text-align: right;">
                                <td>
                                    <a href="https://www.facebook.com/linkhere" color="#754C29" class="sc-hzDkRC kpsoyz" style="display: inline-block; padding: 0px; background-color: rgb(117, 76, 41);">
                                        <img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/facebook-icon-2x.png" alt="facebook" color="#754C29" height="24" class="sc-bRBYWo ccSRck" style="background-color: rgb(117, 76, 41); max-width: 135px; display: block;">
                                        </a>
                                    </td>
                                    <td width="5">
                                        <div></div>
                                    </td>
                                    <td>
                                        <a href="https://www.linkedin.com/linkhere" color="#754C29" class="sc-hzDkRC kpsoyz" style="display: inline-block; padding: 0px; background-color: rgb(117, 76, 41);">
                                            <img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/linkedin-icon-2x.png" alt="linkedin" color="#754C29" height="24" class="sc-bRBYWo ccSRck" style="background-color: rgb(117, 76, 41); max-width: 135px; display: block;">
                                            </a>
                                        </td>
                                        <td width="5">
                                            <div></div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
    <tr>
        <td>
            <table cellpadding="0" cellspacing="0" class="sc-gPEVay eQYmiW" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial; width: 100%;">
                <tbody>
                    <tr>
                        <td height="15"></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td style="text-align: right;">
                            <span style="display: block; text-align: right;">
                                <a target="_blank" rel="noopener noreferrer" href="//" color="#002F59" class="sc-fAjcbJ byigni" style="border-width: 6px 12px; border-style: solid; border-color: rgb(0, 47, 89); display: inline-block; background-color: rgb(0, 47, 89); color: rgb(255, 255, 255); font-weight: 700; text-decoration: none; text-align: center; line-height: 40px; font-size: 12px; border-radius: 3px;">https://calendly.com/linkhere</a>
                            </span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </td>
    </table>
</tr>

undefined

Any help would be greatly appreciated!

Answer 1

<td style="text-align: center; vertical-align: middle">