JSFiddle - React, Tailwind, and code Playground
HTML
<div id="TXN_SAMPLES_createForm1">
<table>
<tr>
<td colspan="2" class="Head">Request Details
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td class="FieldLabel">Lead Src Code
</td>
<td>
<div class="FieldPlaceholder DataOnly">
{Lead_Lead_Source_CODE}
</div>
</td>
</tr>
<tr>
<td class="FieldLabel">Request Date
</td>
<td>
<div class="FieldPlaceholder DataOnly">
{REQUEST_DATE}
</div>
</td>
</tr>
<tr>
<td class="FieldLabel">Customer
</td>
<td>
<div class="FieldPlaceholder DataOnly">
{CUST_NAME}
</div>
</td>
</tr>
<tr>
<td class="FieldLabel">Product
</td>
<td>
<div class="FieldPlaceholder DataOnly">
{PROD_NAME}
</div>
</td>
</tr>
<tr>
<td class="FieldLabel">DG/Non-DG
</td>
<td>
<div class="FieldPlaceholder DataOnly">
{DG_NONDG}
</div>
</td>
</tr>
</table>
</td>
<td class="auto-style2">
<table>
<tr>
<td class="FieldLabel"><img src="http://localhost/AEJ_Project/themes/themeforest/assets/images/logo.png" width="150px" >
</td>
<td>
<div class="FieldPlaceholder DataOnly">
</div>
</td>
</tr>
<tr>
<td class="FieldLabel">.
</td>
<td>
<div class="FieldPlaceholder DataOnly">
</div>
</td>
</tr>
<tr>
<td class="FieldLabel">Country
</td>
<td>
<div class="FieldPlaceholder DataOnly">
{COUNTRY}
</div>
</td>
</tr>
<tr>
<td class="FieldLabel">Division
</td>
<td>
<div class="FieldPlaceholder DataOnly">
{DIVISION}
</div>
...
CSS
.FieldLabel {
padding: 2px;
width: 180px;
}
table{
width: 400px;
border: solid 1px blue;
}
td {
height:30px;
border: solid 1px red;
}
.Head {
text-align: left;
font-weight: bold;
font-size: 20px;
}
.auto-style1 {
width: 420px;
vertical-align: top;
}
.auto-style2 {
width: 420px;
vertical-align: inherit;
}