JSFiddle - React, Tailwind, and code Playground

HTML

<div id="ControlId">
    <select id="ControlId_text" value="Select Options">
        <option selected disabled>Select Options</option>
    </select>
</div>
<div id="ControlId_child" style="display: none">
    <table>
        <tr>
            <td valign="top" style="width: 165px">
                <input type="checkbox" name="vehicle" value="Bike" />option 1</td>
        </tr>
        <tr>
            <td valign="top" style="width: 165px">
                <input type="checkbox" name="vehicle" value="Car" />option 2</td>
        </tr>
        <tr>
            <td valign="top" style="width: 165px">
                <input type="checkbox" name="vehicle" value="dog" />option 3</td>
        </tr>
    </table>
</div>

CSS

select {
    max-width:150px;
    background:White;
    width:150px;
    height: 25px;
}
/* Hidden placeholder */
 select option[disabled]:first-child {
    display: none;
}

JavaScript

$("#ControlId_text").click(function () {

    $("#ControlId_child").toggle();
});
$("#ControlId_child").blur(function(){
            $("#ControlId_child").hide();
        });