JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  1st click here then drag and resize the modal
</button>
<br>
<br>
<button type="button">Next I want to click here without close the modal</button>
<!-- Modal -->
<div class="modal fade autoModal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="background-color: transparent;" data-backdrop="false" data-keyboard="false">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Notes</h4>
      </div>
      <div class="modal-body">
        Sample text Sample text Sample text Sample text Sample text Sample text Sample text
      </div>
    </div>
  </div>
</div>

CSS

//.modal-dialog {
//  position: relative;
//}
.modal-content.ui-resizable {
  overflow-y: scroll;
  position: static;
}

.autoModal.modal .modal-body{
    max-height: 100%;
}

JavaScript

$('.modal-content').resizable({
  alsoResize: "#myModal",
  //minHeight: 150
});
$('#myModal').draggable();

$('#myModal').on('show.bs.modal', function () {
       $(this).css({
              //width:'auto', //probably not needed
              //height:'auto', //probably not needed 
             // 'max-height':'100%'
       });
});