JSFiddle - React, Tailwind, and code Playground

by santosh_patnala

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="row compare-accordion-container">
  <div class="col-sm-12">
    <div class="accordion compare-accordion" id="accordionExample">
      <div class="card-header" id="headingOne">
        <h5 class="mb-0">
          <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
            <i class="fa" aria-hidden="true"></i>
            IT Helpdesk
          </button>
        </h5>
      </div>
      <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
        <div class="card-body">
          <div class="progress progress-resizable progress-draggable">
            <div class="progress-bar" role="progressbar" style="width: 100%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">Train New Staff (100%)</div>
          </div>
          <!--PROGRESS END-->
        </div>
        <!--CARD BODY END-->
      </div>
      <!--COLLAPSE END-->
      <!--CARD END-->
    </div>
    <!--ACCORDION END-->
  </div>
</div>

CSS

.compare-accordion-container {
  background-color: #fcfcfc;
  padding: 24px 15px 2px;
  border-bottom: 8px solid #ccc;
}

.compare-accordion .card {
  margin-bottom: 24px;
  border: 1px solid #dfdfdf !important;
  border-radius: 0 !important;
}

.compare-accordion .card .card-header {
  padding: 6px 20px;
}

.compare-accordion .card .card-header button {
  padding: 0;
}

.compare-accordion .progress {
  height: 30px;
  margin-bottom: 14px;
  min-height: 30px;
  max-height: 30px;
  width: 25%;
}

.ui-resizable-e {
  width: 10px;
}

.ui-resizable-w {
  width: 10px;
}

JavaScript

$(".progress-resizable").resizable({
  handles: 'e, w',
  containment: ".card-body"
});
$(".progress-draggable").draggable({
  containment: ".card-body",
  scroll: false,
  axis: "x"
});

$(".card-resizable").resizable({
  handles: 'e, w',
  containment: ".accordion",
  /*resize: function(event, ui){
  	if($('.progress-resizable').innerWidth()-40 > $(this).width()){
  		console.log("error..!");
  		$(this).find('.progress-resizable').css('width','100%');
  	}
  }*/
});
$(".card-draggable").draggable({
  containment: ".accordion",
  scroll: false,
  axis: "x"
});