JSFiddle - React, Tailwind, and code Playground

HTML

<div id="myDialog" class="dialog">
    <div id="title" class="title">title </div>
    <div id="closeBtn" class="close">x</div>
    <div class="dialogBody">Body... foobar foobar foobar foobar foobar</div>
</div>

CSS

.dialog {
    background-color: #980743;
    padding: 5px;
    width: 200px;
}

.title {
    background-color: #354a65;
    float: left;
    width: 180px;
    color: #fff;
    cursor: move;
}

.close {
    background-color: #425415;
    float: left;
    width: 20px;
    text-align: center;
    color: #fff;
    cursor: pointer;
}

.dialogBody {
    background-color: #9adedf;
}

JavaScript

$( "#myDialog" ).draggable({
    // the handle options is used to specify
    // which element will be used as the drag
    handle: "#title" 
});
$( "#closeBtn" ).click(function(){
    // gets the parent of the close btn
    // and hides it
    $(this).parent().fadeOut();
});