JSFiddle - React, Tailwind, and code Playground
HTML
<div style="text-align:center"><h1 class="inlineBlock" style="margin-top:-5px">Test Format</h1></div>
<div class="twoColumn">
<div style="text-align: right">
<div class="twoColumnV2 inlineBlock">
<div style="text-align: right" class="fieldName inlineBlock">Commodity:</div>
<div style="text-align: left" class="inlineBlock">
<select name="fkTest">
<option value="">Select Commodity:</option>
<option value="1">Avocados</option>
<option value="2">Beans</option>
<option value="3">Berries</option>
<option value="4">Broccoli</option>
</select>
</div>
</div>
</div>
<div style="text-align: left">
<div class="twoColumnV2 inlineBlock">
<div style="text-align:right" class="fieldName inlineBlock">Variety:</div>
<div style="text-align:left" class="inlineBlock">
<select name="fkLocTest" id="fkLocTest">
<option value="">Select Variety:</option>
<option value="12">Beefsteak</option>
<option value="11">Cherry</option>
<option value="13">Cherry on the Vine Organic</option>
<option value="14">Cluster</option>
<option value="10">Grape</option>
<option value="9">Roma</option>
</select>
</div>
</div>
</div>
</div>
CSS
.twoColumnV2 {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-gap: 20px;
-moz-column-gap: 20px;
column-gap: 20px;
-webkit-column-width: auto;
-moz-column-width: auto;
column-width: auto;
}
.twoColumn {
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
-webkit-column-gap: 20px; /* Chrome, Safari, Opera */
-moz-column-gap: 20px; /* Firefox */
column-gap: 20px;
-webkit-column-width: 50%; /* Chrome, Safari, Opera */
-moz-column-width: 50%; /* Firefox */
column-width: 50%;
margin-left: 20%;
margin-right: 20%;
}
.inlineBlock {
display:inline-block;
cursor: pointer;
}