Untitled

<table width="100%" style="background:#fff;min-width:320px;" cellspacing="0" cellpadding="0">
  <tbody><tr>
    <td>
      <table class="w-100p" width="640" align="center" style="background:#fffffe; max-width:640px;" cellpadding="0" cellspacing="0">
        <tbody><tr>
          <td class="plr-15 pb-40" style="padding:0px 20px 0px;">
            <table width="100%" cellpadding="0" cellspacing="0">
              <tbody><tr>
                <td class="plr-0" align="center" style="padding:0 50px 0px; font:16px/26px Verdana, Geneva, sans-serif, Montserrat; color:#333;">
                  <div class="abandoned">
                    {% for item in event_product_details %}
                      <img src="{{ item.image }}" class="abandoned_image" />
                      <div class="abandoned_content">
                        <span class="abandoned_title">{{item.title}}</span>
                        <span>Quantity: {{item.extended_attributes.quantity}} - Total: {{item.price}}</span>
                      </div>
                    {% endfor %}
                  </div>

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

<style>
  .abandoned {
    display: flex;
    width: 360px;
  }
  
  .abandoned_content {
	display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 250px;
  }
  
  .abandoned_title {
    padding: 12px 0;
  }
  
  .abandoned_image {
    display: flex;
    flex: 1;
    height: 250px;
    width: 250px;
  }
  
</style>