<style>
@media all and (max-width: 600px) {
.table-wrapper {
width: 95%;
}
.td-inline {
display: inline-table !important;
width: 100%;
}
.img-100 img {
width: 100%;
height: auto;
}
.show {
display: block;
}
}
</style>
<!-- Image left + Text Right-->
<table width="638" border="0" cellpadding="0" cellspacing="0" align="center" class="table-wrapper" style="background: #f4f5f6">
<tr>
<td>
<!-- Image -->
<table cellpadding="0" cellspacing="0" border="0" align="left" class="td-inline" width="48%">
<tr>
<td class="img-100">
<img src="https://images.unsplash.com/photo-1510771463146-e89e6e86560e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=327&q=80" width="310" height="auto" alt="blank" style="display: block" border="0" />
</td>
</tr>
</table>
<!-- Text -->
<table cellpadding="0" cellspacing="0" border="0" align="left" class="td-inline" width="50%">
<tr>
<td width="30" class="width-20"></td>
<td align="center">
<table cellpadding="0" cellspacing="0" border="0" align="center" width="100%">
<tr>
<td height="34" class="height-10"></td>
</tr>
<tr>
<td style="
font-size: 28px;
font-weight: 500;
font-family: 'Open Sans', Arial, sans-serif;
line-height: 1.3;
">
Lorem ipsum dolor sit amet
</td>
</tr>
<tr>
<td height="16" class="height-10mid"></td>
</tr>
<tr>
<td style="
font-size: 18px;
font-family: 'Open Sans', Arial, sans-serif;
line-height: 1.5;
">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</td>
</tr>
<tr>
<td height="30"></td>
</tr>
<tr>
<td align="left">
<table cellpadding="0" cellspacing="0" border="0" align="left">
<tr>
<td width="200" align="center" height="45" style="border: 2px solid #000">
<a target="_blank" href="#" style="
font-size: 18px;
color: #000;
text-transform: uppercase;
font-family: 'Open Sans', Arial, sans-serif;
font-weight: 700;
text-align: center;
display: block;
line-height: 45px;
vertical-align: middle;
text-decoration: none;
">Shop the Sale</a>
</td>
</tr>
</table>
</td>
</tr>
<tr class="show">
<td height="20"></td>
</tr>
</table>
</td>
<td width="30"></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- End Image left + Text Right -->
<!-- Blank space / divider -->
<table width="640" border="0" cellpadding="0" cellspacing="0" align="center" class="table-wrapper" style="background: #f4f5f6">
<tr>
<td height="40" class="mob-height-20"></td>
</tr>
</table>
<!-- End Blank space / divider -->
<!-- Text Left - Image Right -->
<table width="638" border="0" cellpadding="0" cellspacing="0" dir="ltr" align="center" class="table-wrapper" style="background: #f4f5f6">
<tr>
<td>
<!-- Image -->
<table cellpadding="0" cellspacing="0" border="0" align="right" class="td-inline" width="48%">
<tr>
<td class="img-100">
<img src="https://images.unsplash.com/photo-1586671267731-da2cf3ceeb80?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=389&q=80" width="310" height="auto" alt="blank" style="display: block" border="0" />
</td>
</tr>
</table>
<!-- Text -->
<table cellpadding="0" cellspacing="0" border="0" align="left" class="td-inline" width="50%">
<tr>
<td width="30" class="width-20"></td>
<td align="center">
<table cellpadding="0" cellspacing="0" border="0" align="center" width="100%">
<tr>
<td height="34"></td>
</tr>
<tr>
<td style="
font-size: 28px;
font-weight: 500;
color: #000;
font-family: 'Open Sans', Arial, sans-serif;
line-height: 1.3;
">
Lorem ipsum dolor sit amet
</td>
</tr>
<tr>
<td height="16"></td>
</tr>
<tr>
<td style="
font-size: 18px;
color: #000;
font-family: 'Open Sans', Arial, sans-serif;
line-height: 1.5;
">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</td>
</tr>
<tr>
<td height="30"></td>
</tr>
<tr>
<td align="left">
<table cellpadding="0" cellspacing="0" border="0" align="left">
<tr>
<td width="200" align="center" height="45" style="border: 2px solid #000">
<a target="_blank" href="#" style="
font-size: 18px;
color: #000;
text-transform: uppercase;
font-family: 'Open Sans', Arial, sans-serif;
font-weight: 700;
text-align: center;
display: block;
line-height: 45px;
vertical-align: middle;
text-decoration: none;
">Watch the Video</a>
</td>
</tr>
</table>
</td>
</tr>
<tr class="show">
<td height="20"></td>
</tr>
</table>
</td>
<td width="30"></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- End Text Left - Image Right -->
