JSFiddle - React, Tailwind, and code Playground

HTML

<div class="selector" id="my-dropdown-div">
    <span class="label">Presumably something goes here</span>
    <div class="drop_down_label">
        <input type="checkbox" value="1" /> 1
        <input type="checkbox" value="2" /> 2
    </div>
</div>
<p>This is something else entirely</p>
<p>This is something else too</p>

CSS

.selector {
    display:block;
    width:200px;
    background:rgba(0,0,0,.5);
}
.drop_down_label {
    display:none;
}

JavaScript

$('.selector').click(function() {
    var self = $(this);
    $(this).children('.drop_down_label').animate({paddingRight:'100px'});
});
$('.selector').each(function(i,n){
    var self = $(this);
    $(document).on('click', function(e) {
        var target = $(e.target);
        if (target.closest('.selector').is(self) == false){
            self.children('.drop_down_label').hide();
        }
    })
});
$("input[type=checkbox]", ".selector").click(function(e){
    e.stopPropagation();
});