JSFiddle - React, Tailwind, and code Playground
by bschafer
HTML
<span class="itemlbl">title</span><input style="width: 450px;"></input></br>
<div class="col">
<span class="itemlbl">casetype</span><select data-bind="value: priority">
<option>select</option>
</select></br>
<span class="itemlbl">priority</span><select data-bind="value: priority"><option>-</option></select></br>
<span class="itemlbl">severity</span><select data-bind="value: severity">
<option>-</option>
</select></br>
<span class="itemlbl">psere</span><span>blah</span></br>
<span class="itemlbl">priority</span><span>blah</span></br>
<span class="itemlbl">status</span><select data-bind="value: status">
<option>-</option>
</select></br>
<span class="itemlbl">phase</span><select data-bind="value: phase">
<option>-</option>
</select></br>
<span class="itemlbl">dupeof</span><select data-bind="value: dupeof">
<option>-</option>
</select></br>
<span class="itemlbl">childof</span><select data-bind="value: childof">
<option>-</option>
</select></br>
<span class="itemlbl">finder</span><input style="width: 250px;"></input></br>
<span class="itemlbl">finder email</span><input style="width: 250px;"></input></br>
<span class="itemlbl">public</span><select data-bind="value: dupeof">
<option>-</option>
</select></br>
<span class="itemlbl">reported details</span><textarea cols=80 rows=10 data-bind="text: reporteddetails"></textarea></br>
<span class="itemlbl">repro instructions</span><textarea cols=80 rows=10 data-bind="text: reproinstructions"></textarea>
CSS
body {
margin: 10px;
font-family: Arial;
}
input, textarea, select {
margin: 0px;
}
.col {
display: inline-block;
vertical-align: top;
}
.itemlbl {
display: inline-block;
min-width: 100px;
font-size: 0.8em;
font-weight: 500;
color: #416A95;
margin: 3px 10px;
padding-bottom: 1px;
border-bottom: 2px dotted #ccc;
vertical-align: top;
}
JavaScript
$(function () {
alert("DOM Loaded");
});