JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
<div>
    <form id="everything">
        <label for="dd1">Select the best option</label>
        <br/>
        <select name="dd1" id="dd1" class="required">
            <option value="">None</option>
            <option value="o1">option 1</option>
            <option value="o2">option 2</option>
            <option value="o3">option 3</option>
        </select>
        <br/>
        <br/>
        <label for='agreement'>I accept the TOS</label>
        <input id="agreement" name="agreement" type="checkbox" style='float:left' />
        <br/>
        <input type="submit" />
</div>
</form>

CSS

#everything label.error {
    color: #FB3A3A;
    display: inline-block;
    margin: 0px 10px 0px 60px;
    padding: 0;
    text-align: left;
    width: 320px;
}

#everything2 label.error {
    color: #2E0854;
    margin: 0px 10px 0px 10px;
}

JavaScript

$("#everything").validate({
    rules: {
        agreement: {
            required: true,
            minlength: 1
        },
        errorPlacement: function (error, element) {
            if (element.attr("name") == "agreement") {
                error.appendTo($("#everything2"));
            }
        } 


    },
    messages: {
        dd1: {
            required: "Please select an option",
        },
        agreement: {
            required: "Accept the TOS.",
        },
    }
});