JSFiddle - React, Tailwind, and code Playground

by Bladetrick

HTML

<div id="block">
  <div id="divContent">
    <button id="btnDisplayBTN">Display</button>
    <button id="btnGetHeight" click="btnGetHeight_Click()">Total Height</button>
    <input id="txb" />
  </div>
</div>

<div id='monitor'>
  <div id='h'></div>
  <div id='w'></div>
  <div id='dconpos'></div>
  <div id='dconheight'></div>
</div>

CSS

#block {
  border: 1px solid red;
  background-color: red;
  width: 300px;
  padding: 5px
}
#btnDisplayBTN {
  width: 100px;
}
#btnGetHeight {
  width: 100px;
}
.btnNewBTN {
  width: 100px;
}
#divContent {} div {
  width: 100%;
}
#monitor {
  position: fixed;
  bottom: 2em;
}

JavaScript

var block = $("#block");
var content = $("#divContent")
var cons = content.children().length * 20;
var numberOfControls = content.children().length;
var controlheight = 20;
var padding = 5;
var totalwidth = 0;
var totalheight = 0;
var minwid = 0;
var maxwid = 0;
var minhi = 0;
var maxhi = 0;
var arrwid = [];

block.ready(function(e) {
  //--- initialize values
  totalwidth = 0;

  //--- Find the sum of lengths of controls to set the maximum width
  maxwid = getMaxWidth() + padding;

  //--- Find the control with the longest length for minimum width
  minwid = getMinWidth() + padding;

  //--- Find number of controls to set the height
  maxhi = getMaxHeight();

  //--- Find minHeight
  minhi = controlheight;
  res();
});

block.draggable();

function res() {
  block.resizable({
    maxWidth: maxwid,
    minWidth: minwid,
    maxHeight: maxhi,
    minHeight: minhi,
    resize: function(e) {
      block.height(getMaxHeight());
    }
  });
}
$(window).load(function() {
  res(); // defined for later resetting
});

function getMaxWidth() {
  content.children().each(function(i, val) {
    totalwidth = totalwidth + $("#" + val.id).width() + padding;
  });
  return totalwidth;
}

/*
function getMaxWidth() {
    var tempWidth = [];
    content.children().each(function(i, val){
        tempWidth.push($(this).outerWidth());          
    });
    totalwidth = Math.max.apply(null, tempWidth);
    return totalwidth;
}  // this function will get you the maximum current width, but combined with maxheight will effectively lock your resizer.
*/

function getMinWidth() {
  var arrwid1 = [];
  content.children().each(function(i, val) {
    arrwid1.push($(this).width());
  });
  minwid = Number(Math.max.apply(null, arrwid1)) + padding;
  $('#w').text('minwidth =' + minwid);
  return minwid;
}

function getMaxHeight() {
  var dcon = $('#divContent').children().last(),
    totalwidth = dcon.position().top + dcon.height();
  $('#h').text('height =' + totalwidth);
 ...