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" id="panels">
            <div class="panel panel-info dashboard_panel">
                <div class="panel-heading">id23/emotion/m0</div>
                <div class="well well-sm"> <span class="label label-success">Current position: 10.00</span>
 <span class="label label-default">Limits: -180, 180</span>

                </div>
                <div class="panel-body">
                    <input type="text" class="dial" id="knob1" data-min="-18000" data-height="100%" data-width="100%" data-max="18000"></input>
                </div>
                <div class="panel-footer clearfix">
                    <button class="btn btn-default">Edit position</button>
                    <button class="btn btn-default">10.0</button>                    
                    <div class="btn-toolbar pull-right">
                        <button class="btn btn-primary">Go</button>
                        <button class="btn btn-danger pull-right">Stop</button>
                    </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%;
}

JavaScript

$("#panels").sortable({
    handle: $(".dashboard_panel .panel-heading")
});

$(".dial").knob({
    format: function (v) {
        return v / 100.00;
    }
});

$("#knob1").val(1000).trigger("change");

$(".dashboard_panel").resizable({
    stop: function () {
        $(this).height('auto');
    }
});