JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/black-tie/jquery-ui.css">
<script src="https://raw.githubusercontent.com/aterrien/jQuery-Knob/master/dist/jquery.knob.min.js"></script>
<div class="container-fluid">
<div class="row-fluid">
<div class="col-md-12">
<div class="panel panel-info dashboard_panel">
<div class="panel-heading">id23/emotion/m0</div>
<div class="panel-body">
<div class="mydiv"></div>
</div>
</div>
</div>
</div>
</div>
CSS
.dashboard_panel .panel-heading {
cursor: move;
}
.dashboard_panel {
min-height: 200px;
}
.panel-body {
min-height:200px;
height:100%;
position: relative;
}
.mydiv {
position: absolute;
background-color:yellow;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
JavaScript
$(".dashboard_panel").resizable({
alsoResize: ".mydiv, .panel-body"
});