Как сверстать в 2 кнопки для письма?

Question

[Qurel]

Есть две кнопки, которые должны быть в одну линию по краям письма в десктопной версии:

В мобильной версии стоять по центру друг под другом:


На данный момент есть такой адаптивный вариант:

<!-- Две кнопки -->
   <tr>
        <td>
            <table border="0" cellspacing="0" cellpadding="0" width="100%" style="max-width: 570px;">
                  <tr>
                        <td style="padding: 10px;max-width: 46%;width: 100%;display: inline-block;">
                              <a href="#" style="height: 40px;line-height: 40px;padding: 0 15px; display: inline-block;background-color: dodgerblue;"></a>
                          </td>
                          <td style="padding: 10px;max-width: 46%;width: 100%;display: inline-block;">
                                <a href="#" style="height: 40px;line-height: 40px;padding: 0 15px; display: inline-block;background-color: dodgerblue;"></a>
                           </td>
                      </tr>
                </table>
         </td>
    </tr>

Но кнопки не прижаты к краям письма:

Comments

[Sebastian Lore]

flex можно использовать? Я не верстальщик, но набросал тут: https://jsfiddle.net/du1vyb79/

Answer 1

[Александр Таратин]

https://mjml.io/

Answer 2

[Максим Елизаров]

Вот да, используйте mjml.io

Код простейший

<mjml>
  <mj-body>


    <mj-section>
      <mj-column width="200">
        <mj-button background-color="black" color="white" href="http://toster.ru">
          mjml me!
        </mj-button>
      </mj-column>

      <mj-column width="200">
        <mj-button background-color="black" color="white" href="http://toster.ru">
          mjml me!
        </mj-button>
      </mj-column>
    </mj-section>


  </mj-body>
</mjml>