JSFiddle - React, Tailwind, and code Playground
HTML
<div class="header"><div class="div1">Text1</div><div class="div2">Text2</div></div>
<div style="display:inline-block;vertical-align: top;white-space: nowrap;">
<div class='column' style='width: 300px'>
<p>
xyz
</p>
<!-- <table class='contents' style='border-spacing: 0;width: 100%;-webkit-font-smoothing: antialiased;color: #333333;font-family: Arial,sans-serif;font-size: 14px;text-align: left;' bgcolor='#FFFFFF'>
<tr style='-webkit-font-smoothing: antialiased;'>
<td align='left' style='-webkit-font-smoothing: antialiased;border: 0;width: 100%;max-width: 300px;height: auto;'>
<img class='hideonmobile' src='https://firebasestorage.googleapis.com/v0/b/example-cd8a1.appspot.com/o/luca-bravo-207676-unsplash.jpg?alt=media&token=be8815bc-8836-4db5-a246-ebda75e64cb4' width='300' >
</td>
</tr>
</table> -->
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
<td width='50%' valign='top' style='padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;'>
<![endif]-->
<div class='column' style='-webkit-font-smoothing: antialiased;max-width: 300px;'>
<p>
abc
</p>
<!-- <table width='100%' style='border-spacing: 0;-webkit-font-smoothing: antialiased;color: #333333;font-family: Arial,sans-serif;'>
<tr style='-webkit-font-smoothing: antialiased;'>
<td class='inner'...
CSS
.header div{
display:inline-block;
vertical-align:top;
}
.header{
white-space: nowrap;
}
.div1{
background-color:red;
width: 400px;
margin-right: 10px;
}
.div2{
width:355px;
background-color:blue;
}