JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="ddlHobbies" style="margin-left:20px;margin-top:20px;"/>
    <div>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
         Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero 
        sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</div>
    <div id="ddlChkHobbies" style="background-color: blue; color: white">
        <input type="checkbox" value="Hello" />Hello<br />
        <input type="checkbox" value="Hello" />Hello<br />
        <input type="checkbox" value="Hello" />Hello<br />
    </div>

JavaScript

$(document).ready(function () {
    $("#ddlChkHobbies").droppie({
        relId: "#ddlHobbies",
        padding: 6,
        vgap: 6
    });
});
// jQuery Function
$.fn.droppie = function (arr) {    
    var relId = arr.relId;
    var self = this;
    if (relId == null) {
        return;
    }    
    var relElem = $(relId);
    var vgap = arr.vgap || 2;
    var padding = arr.padding || 5;

    // Caluclating the border...
    var relBorder = parseInt($(relElem).css('border-top-width').split('px')[0]) * 2;    

    // Calculating the left and top pos...
    var leftPos = $(relElem).offset().left;
    var topPos = $(relElem).offset().top + vgap + $(relElem).height() + relBorder;

    // WidthOfDiv =  Width + Border - Padding
    var widthOfDiv = ($(relElem).width()) + relBorder - (padding * 2);
    var mainElem = $(this);
    $(this).css({
        'position': 'absolute',
        'top': topPos + 'px',
        'left': leftPos + 'px',
        'width': widthOfDiv + 'px',
        'padding': padding + 'px',
        'display':'none'
    });
    $(document).on('click', function (e) {
        var targetEl = e.target,
            parent = $(e.target).parents()[0];
        if (relElem[0] === targetEl || self[0] === targetEl || self[0] === parent) {
            $(mainElem).show();
        } else {
            $(mainElem).hide();
        }
    });

}