JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/icheck.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/skins/all.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<span><strong>Form Group</strong></span>
<div class="form-group" >
<input id="car1" class="checkbox-inline" type="checkbox" checked>
<label for="car1" class="checkbox-label">Suicide/Suicidal Ideation</label>
<input id="car2" class="checkbox-inline" type="checkbox" checked>
<label for="car2" class="checkbox-label">Anxiety/Panic Attacks</label>
<input id="car3" class="checkbox-inline" type="checkbox" checked>
<label for="car3" class="checkbox-label">PickUp Truck</label>
<input id="car4" class="checkbox-inline" type="checkbox" checked>
<label for="car4" class="checkbox-label">Luxury Sedan</label>
</div>
<div class="form-group" >
<input id="car5" class="checkbox-inline" type="checkbox" checked>
<label for="car5" class="checkbox-label">Limousine</label>
<input id="car6" class="checkbox-inline" type="checkbox" checked>
<label for="car6" class="checkbox-label">Motorcycle</label>
<input id="car7" class="checkbox-inline" type="checkbox" checked>
<label for="car7" class="checkbox-label">Coupe</label>
<input id="car8" class="checkbox-inline" type="checkbox" checked>
<label for="car8" class="checkbox-label">Luxary Coupe</label>
</div>
<p />
<div class="row" id="Actions">
<div class="col-md-12">
</div>
</div>
CSS
.form-group label {
display: inline-block;
min-width: 1em;
}
JavaScript
var Actions = "Parents notified on,Katy ISD police notified (required for all reports to CPS) on,Contact with outside mental health provider (with parents' written consent) on,Referral sources for outside mental health services provided to parents on,LSSP assistance requested on,Other";
var ActionList = Actions.split(',');
var htm = '';
var counter = 0;
for (var i = 0; i < ActionList.length; i++) {
if (ActionList[i] != "Other") {
htm += "<div style=\"padding:0px 12px 0px 12px;\"><input type=checkbox id=\"" + ActionList[i] + "\" class=\"cbshort cbactionlist\" value=\"" + ActionList[i] + "\">" + ActionList[i] + " <input type=text id=\"actiondate" + ActionList[i] + "\" class=w75><img src=\"images\\cal.gif\" id=\"btn_actiondate" + ActionList[i] + "\" class=\"hand\"></div>";
} else {
htm += "<div style=\"padding:0px 12px 0px 12px;\"><input type=checkbox id=\"" + ActionList[i] + "\" class=\"cbshort cbactionlist\" value=\"" + ActionList[i] + "\">" + ActionList[i] + " <input type=text class=w400 id=actionotherdesc> <input type=text id=\"actiondate" + ActionList[i] + "\" class=w75><img src=\"images\\cal.gif\" id=\"btn_actiondate" + ActionList[i] + "\" class=\"hand\"></div>";
}
}
$('#Actions > .col-md-12').html(htm);