two-column-section

{% load staticfiles %}

<tr>
  <td>
    <table width="576" cellpadding="0" cellspacing="0" class="wrapper" style="margin-top: 60px;">
      <tr>
        <td>

          {% with text_align='left' align='left' %}
          <table width="280" align="{{ align }}" style="-ms-text-size-adjust: none;-webkit-font-smoothing: antialiased;-webkit-text-size-adjust: none;color: #444444;font-family:'Lato','Lucida Sans','Lucida Sans Unicode','Lucida Grande',SegoeUI,'Helvetica Neue',Helvetica,Arial,sans-serif;font-size: 14px;line-height: 24px;text-align: {{ text_align }};">
            <tr>
              <td>
                <img src="https://s3-us-west-2.amazonaws.com/beanreviews/assets/email_sample_image_252x300.png" width="252" style="vertical-align: middle">
              </td>
            </tr>
          </table>
          {% endwith %}

          {% with text_align='left' align='right' %}
          <table width="280" align="{{ align }}" style="-ms-text-size-adjust: none;-webkit-font-smoothing: antialiased;-webkit-text-size-adjust: none;color: #444444;font-family:'Lato','Lucida Sans','Lucida Sans Unicode','Lucida Grande',SegoeUI,'Helvetica Neue',Helvetica,Arial,sans-serif;font-size: 14px;line-height: 24px;text-align: {{ text_align }};">
            <tr>
              <td>
                <h2 style="color: #444444; font-size: 32px; font-weight: 300; line-height: 36px; margin-bottom: 19px; margin-top: 0">An h2 header can lead this section.</h2>
                <p style="margin: 0">Be aware that the align property defines which column appears on top in the mobile view.
                  <br>
                  {% with alignment='left' link='http://www.beanreviews.com/' copy='Learn more'%}
                  {% include 'mail/elements/button_standard.html' %}
                  {% endwith %}
                </p>
              </td>
            </tr>
          </table>
          {% endwith %}

        </td>
      </tr>
    </table>
  </td>
</tr>