JSFiddle - React, Tailwind, and code Playground

HTML

<div class="members-column">
  <div class="sort"> 1 </div>
  <div class="sort"> 1 </div>
</div>
<div id="groupB" class="members-column">

</div>
<div class="members-column">
  <div class="sort"> 2 </div>
</div>
<a href="" id="replace">replace groupB</a>

CSS

.members-column {
  min-height: 100px;
  background-color: red;
  width: 33.33%;
  float:left;
}

#groupB {
  background-color: blue;
  width: 1%;
  flex-basis:10px;
}

.members-column div {
  width: 200px;
  background-color: grey;
}

JavaScript

$(".members-column").sortable({
   items: ".sort",
   connectWith: ".members-column"    
 });
$("#groupB").on("sortover", function() {
  console.log('overB');
  $('#groupB').css('min-width','80px');
});
$("#groupB").on("sortout", function() {
  console.log('outB');
  $('#groupB').css('min-width','');
});
$("#replace").on("click", function(e) {
	e.preventDefault();
  $("#groupB").replaceWith('<div id="groupB" class="members-column"></div>');
});