JSFiddle - React, Tailwind, and code Playground

HTML

<label for="first_name" class="companyLabel">
    <div class="row remove-bottom">
         <h3 class="remove-bottom left">First Name</h3>
 <i class="fa fa-check right">Checkmark goes here</i>

    </div>
    <hr>
    <p>Short Description with what the hell First Name is</p>
</label>
<input type="checkbox" class="companyCheckBox hide" name="basicInfo" value="first_name" id="first_name">
<label for="first_name" class="companyLabel">
    <div class="row remove-bottom">
         <h3 class="remove-bottom left">First Name</h3>
 <i class="fa fa-check right">Checkmark goes here</i>

    </div>
    <hr>
    <p>Short Description with what the hell First Name is</p>
</label>
<input type="checkbox" class="companyCheckBox hide" name="basicInfo" value="first_name" id="first_name">

CSS

.companyLabel {
    display: block;
    padding: 5px 10px 20px 10px;
    cursor: pointer;
    border: solid 2px #969696;
    margin: 5px 0px 5px 0px;
    p {
        font-size: 80%;
    }
    i {
        padding: 15px 15px 0px 15px;
        font-size: 160%;
        color: green;
        display: none;
    }
}
.companyLabel:hover {
    h3 {
        color: green;
    }
    background: @green;
    border: 2px solid green;
    color: @white;
    cursor: pointer;
}
.companyLabelBackground {
    h3 {
        color: green;
    }
    background: @green;
    border: 2px solid green;
    color: black;
    cursor: pointer;
}
.hide {
    display: none !important;
}

JavaScript

$(document).ready(function () {
    $(".companyLabel").click(function () {
        $(this).find(".fa-check").toggle();
        $(this).toggleClass("companyLabelBackground");
    });
});