JSFiddle - React, Tailwind, and code Playground
HTML
<form name="addUserTaskForm" id="addUserTaskForm" class="form-horizontal" action='<c:url value="/task/saveTask"/>' method="POST">
<input type="hidden" value="${LOGGEDIN_USER.id}" name="user"/>
<div class="form-group required">
<label class="col-sm-3 control-label">Task</label>
<div class="col-sm-4">
<select name="task" id="task" class="form-control">
<option value="" selected>Select Task</option>
<c:forEach items="${tasks}" var="taskVar">
<option value="${taskVar.id}" >${taskVar.lookupValueLabel}</option>
</c:forEach>
</select>
</div>
<div id="task_error"></div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Work Item</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="ticketId" name="ticketId">
</div>
<div id="ticketId_error"></div>
</div>
<div class="form-group required">
<label class="col-sm-3 control-label">Time</label>
<div class="col-sm-1">
<select name="workedHours" id="workedHours" class="form-control">
<option value="" selected>Select</option>
<option value="0">0</option>
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
<option value="4" >4</option>
<option value="5" >5</option>
<option value="6" >6</option>
<option value="7" >7</option>
<option value="8" >8</option>
<option value="9" >9</option>
<option value="10" >10</option>
<option value="11" >11</option>
<option value="12" >12</option>
<option value="13" >13</option>
<option value="14" >14</option>
<option value="15" >15</option>
<option value="16" >16</option>
<option value="17" >17</option>
...
CSS
#addUserTaskForm .form-group div.col-sm-1{
width:45%;
}
#addUserTaskForm .form-group div.col-sm-1:nth-child(2){
margin-bottom:5px;
}
#addUserTaskForm .form-group div.col-sm-1:nth-child(4){
margin-left:35%;
}