JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<body>
    <div id="dragCon">
        <div class="mydrag">
            <div class="handle">
                <button>Hide</button>
                <div>DRAG</div>
            </div>
            <div class="mycontent">
                <P>Blah</P>
                <P>Blee</P>
            </div>
        </div>
    </div>
</body>

CSS

.mydrag {
    border: 1px solid gray;
    position: absolute;
    background: #eee;
    width: 60%;
}
.handle {
    background: #0f0;
    cursor: move;
}
#dragCon {
    position: relative;
}

JavaScript

$(".mydrag").draggable({
    handle: "div.handle",
    container: "#dragCon",
    stack: ".mydrag"
});
$(".mydrag .handle  button").each(function (index, element) {
    $(element).click(function (e) {
        var whit = $(e.target.parentNode.parentNode).find(".mycontent");

        var curState = whit.first().css("display");
        whit.first().css("display", curState === "block" ? "none" : "block");
    });
});