Hot to make multiple element both on the left side and right side on html email?

It should support for html email, so I can't use justify-content and align-items.

I try to use position: absolute for <img />, but It's not working on html email ?

Hot do I make the Twitter icon on the left side and on the same line with 1 2 3 for html email ?

    <div
      class="footer-container"
      style="
      position: relative;
      background: pink;
      position: fixed;
      bottom: 0;
      width: 100%;"
    >
      <!-- position is not working on html email -->
      <div
        class="image-container"
        style="position: absolute; top: 30px; left: 24px"
      >
        <img 
          src="https://www.citypng.com/public/uploads/preview/-516139511470ymv2hndq6.png"
          alt="test"
          width="94"
        />
      </div>
      <div
        class="centered"
        style="padding-top: 40px; padding-bottom: 40px; padding-right: 30px; text-align:right;"
      >
        <a>1</a>
        <a>2</a>
        <a>3</a>
    </div>
</div>

Solution

In email-templates you have limited support and as such sue techniques that are outdated or would not be semantically correct for normal HTML files.

In this case, you should use a table for layout purposes. You can shrink the table cells to their minimum content by using: style="width: 0; white-space: nowrap;"

<table width="100%">
  <tr>
    <td>
      <img src="https://www.citypng.com/public/uploads/preview/-516139511470ymv2hndq6.png" alt="test" width="94">
    </td>
    <td style="width: 0; white-space: nowrap;">
      <a>1</a>
    </td>
    <td style="width: 0; white-space: nowrap;">
      <a>2</a>
    </td>
    <td style="width: 0; white-space: nowrap;">
      <a>3</a>
    </td>
  </tr>
</table>