JSFiddle - React, Tailwind, and code Playground
HTML
<table class="striped" width="90%">
<tr>
<td class="alignleft">Gather host info:
<button id="gatherHostInfo" type="button">Gather Host
Info</button>
</td>
</tr>
<tr>
<td class="alignleft">Host password:<input type="text" id="hostPassword" /></td>
<td> </td>
<td class="aligncenter">Serial Number:<input path="serialNumber" size="30" />
<errors path="serialNumber" cssClass="error" /></td>
</tr>
<tr>
<td class="alignleft">Resource Name:<input path="resourceName"
id="hName" size="30" /> <errors path="resourceName"
cssClass="error" /></td>
<td> </td>
<td class="aligncenter">Resource Status:<select path="resourceStatus">
<option value="Available" label="Available" />
<option value="InActive" label="InActive" />
</select></td>
</tr>
<tbody id="ipTable">
<tr>
<td class="alignleft">Primary Mgmt IP address:<input path="IPaddress"
id="ip" size="30" /></td>
<td> </td>
<td class="aligncenter">VMKernel:<input path="VMKernel" size="30" />
</tr>
<tr>
<td class="alignleft">Resource Group:<select path="groupCol">
<options items="${groupCols}" />
</select></td>
</tr>
</tbody>
<tr class="addResRow">
<td class="alignleft">ESX Type:<select path="esxType" id="esxType">
<option value="NONE" label="--- Select ---" />
<c:forEach items="${esxType}" var="typeVar">
<option value="${typeVar}">${typeVar}</option>
</c:forEach>
</select></td>
<td> </td>
<td class="aligncenter">ESX Version:<select path="esxVersion"
id="esxVersion">
<option value="NONE" label="--- Select ---" />
<c:forEach items="${esxVersionsPassed}"...
CSS
.alignleft {
float: left;
width:33.33333%;
text-align:left;
}
.aligncenter {
float: left;
width:33.33333%;
text-align:center;
}
.alignright {
float: left;
width:33.33333%;
text-align:right;
}
td{
white-space:nowrap;
}