JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

  <div id="oneCol" class="ca container">one col</div>
  <div id="twoCol" class="ca container">two cols</div>
  <div id="threeCol" class="ca container">three cols</div>
  <div id="txtImg" class="ce content">text img block</div>
  <div id="move_mode" style="width:100px; height:30px;background-color:orange;cursor:pointer;line-height:30px;valign:middle;margin-bottom:10px;">Move Mode</div>
  <div id="edit_mode" style="width:100px; height:30px;background-color:orange;cursor:pointer;line-height:30px;valign:middle;">Edit Mode</div>
<p>&nbsp;&nbsp;</p>

  <table class="fixed">
    <tbody>
      <tr>
        <td width="50" id="fixID1"></td>
        <td width="200"id="fixID2" class="containerCanDropHere"></td>
        <td width="50" id="fixID3"></td>
      </tr>
    </tbody>
  </table>

CSS

.ca {
  width: 70px;
  height: 24px;
  background-color: #fdd;
  display: inline-table;
  margin:4px;
  text-align:center;
}

.ce {
  width: 100px;
  height: 24px;
  background-color: #6cc;
  display: inline-table;
  margin:4px;
  text-align:center;
}

#content {
  width: 100px;
  height: 100px;
  background-color: #dfd;
  z-index: 4;
}

table.fixed {
	border-collapse: collapse;
	width: 400px;
}

.fixed td {
	border: 1px dotted silver;
	text-align: center;
	height:50px;
}

JavaScript

var tbw = '';
 var idCount = 1;

 var $oneCol = '<table align="center" width="100%" border="1" class="eeW"><tr><td class="container" id="idTmp1"></td></tr></table>';
 var $twoCol = '<table align="center" width="100%" border="1" class="eeW"><tr><td class="container" width="50%" id="idTmp1"></td><td class="container" width="50%" id="idTmp2"></td></tr></table>';
 var $threeCol = '<table align="center" width="100%" border="1" class="eeW"><tr><td class="container" width="33%" id="idTmp1"></td><td class="container" width="34%" id="idTmp2"></td><td class="container" width="33%" id="idTmp3"></td></tr></table>';
 var $txtImg = '<table class="move" width="100px" border="1"><tr><td class="edit" valign="top">Enter your text here...<br>&nbsp;<br>&nbsp;</td><td class="edit" valign="top"><img src="80x80.gif" width="80" height="80"  border="0" /></td></tr></table>';

  $('.container,.content').draggable( {
	start: function(event, ui) {

    tbw = (event.target.id);
    },
    cursor: 'move',
    containment: 'document',
	revert: true,
    helper: 'clone'
  });
  
   $(".containerCanDropHere").droppable({
            accept: '.container',  
            drop: function (event, ui) {
                ui.draggable.draggable( 'option', 'revert', false );
				if(tbw === 'oneCol') {
					$newElt = $($oneCol);
                    $newElt.appendTo(this);
					$('#idTmp1').attr('id','containerID' + idCount);
					idCount++;
				} else if(tbw === 'twoCol') {
					$newElt = $($twoCol);
         // alert($($newElt).html());
                    $newElt.appendTo(this);
					$('#idTmp1').attr('id','containerID' + idCount);
					idCount++;
					$('#idTmp2').attr('id','containerID' + idCount);
					idCount++;
				} else if(tbw === 'threeCol') {
					$newElt = $($threeCol);
                    $newElt.appendTo(this);
					$('#idTmp1').attr('id','containerID' + idCount);
					idCount++;
					$('#idTmp2').attr('id','containerID' + idCount);
					idCount++;
					$('#idTmp3').attr('id','containerID' +...