JSFiddle - React, Tailwind, and code Playground

by Samir Chaves

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">
  <div class="row">
    <div class="col-md-12" id="panels">
      <div class="col-md-3">
        <div class="panel panel-info dashboard_panel panels">
          <div class="panel-heading">Painel 1</div>
          <div class="panel-body">
            <p class="text-justify" >
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus cursus sem at tellus tristique tempor. Duis tempus felis rhoncus nibh finibus, id consectetur lacus vestibulum. Nulla a mi quam. Etiam commodo vitae erat et volutpat. Ut suscipit, sapien eu elementum sollicitudin, libero tellus ullamcorper sapien, id tristique mi libero vestibulum neque. Suspendisse vel velit gravida, elementum sem at, rutrum lacus. Vivamus vitae lectus diam. Vivamus sed euismod mi, vitae consequat lorem.
            </p>
          </div>
          <div class="panel-footer">Panel footer</div>
        </div>
      </div>
      <div class="col-md-3 panels">
        <div class="panel panel-info dashboard_panel panels">
          <div class="panel-heading">Painel 2</div>
          <div class="panel-body">
          </div>
          <div class="panel-footer">Panel footer</div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.panel{
      min-height: 100px;
      overflow: hidden;
    }
    .panel-footer{
      position: absolute;
      bottom: 0;
      width: 100%;
    }

JavaScript

$(".dashboard_panel").resizable({handles: "s"});