JSFiddle - React, Tailwind, and code Playground

by TrueBlueAussie

HTML

<link rel="stylesheet" href="http://harvesthq.github.io/chosen/chosen.css">
<script src="http://harvesthq.github.io/chosen/chosen.jquery.js"></script>
<div class="techTableHolder" id="techTableHolder">
    <div class="section group span_small_pad_top">
        <div class="col span_small vertAlignT">	<sup class="defaultRed">*</sup> First Name:</div>
        <div class="col span_large span_small_pad_left">
            <input type="text" ID="tbFirst" class="tbTech htLeft" />
        </div>
    </div>
    <div class="section group span_small_pad_top" style="overflow: visible;">
        <div class="col span_small vertAlignT">	<sup class="defaultRed">*</sup> State:</div>
        <div class="col span_large span_small_pad_left">
        </div>
    </div>
    <div class="section group span_small_pad_top">
        <div class="col span_small vertAlignT">	<sup class="defaultRed">*</sup> Zip:</div>
        <div class="col span_large span_small_pad_left">
            <input type="text" ID="tbZip" MaxLength="5" class="tbTech htLeft" />
        </div>
    </div>
    <div class="section group span_small_pad_top">
        <div class="col span_small vertAlignT">Date of Birth:</div>
        <div class="col span_large span_small_pad_left">
            <input type="text" ID="tbDOB" class="tbTech htLeft" />
        </div>
    </div>
    <div class="section group span_small_pad_top" style="overflow: visible;">
        <div class="col span_small vertAlignT">	<sup class="defaultRed">*</sup> Issue:</div>
        <div class="col span_large span_small_pad_left">
            <div class="col span_large span_small_pad_left">
                <select name="ctl00$BodyPlaceHolder$ddlTechIssues" id="ddlTechIssues" class="chosen-select setProvDDStyle htLeft">
                    <option value="Select an Issue">Select an Issue</option>
                    <option value="Access">Access</option>
                    <option value="Fam">Fam</option>
                </select>
            </div>
       ...

CSS

.setNormal {
            font-weight: normal;
        }
        .setBold {
            font-weight: bold;
        }

JavaScript

$(document).ready(function () {
    $(".section").css({
        border: "1px solid blue",
        padding: 5,
        margin: 10
    });
    $(".chosen-select").chosen();

    $("body").on("focusin focusout", ".htLeft, .chosen-search input", function (e) {
        var focusin = e.type == "focusin";
        $(this).closest(".section").find(".span_small:first").toggleClass("setNormal", !focusin).toggleClass("setBold", focusin);
    });
});