JSFiddle - React, Tailwind, and code Playground

by suiko

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="main-container">
    <div class='custom-container container'>
        <div class='custom-row row'>
          <div class='custom-column col-md-4 second-column'>
          </div>
       </div>
     </div>
</div>

CSS

.resize-handle{
    background: #fff;
    border: 1px solid #259aff;
    height: 7px;
    width: 7px;
    position: absolute;
    z-index: 5010;
    pointer-events: auto;
    right:-3.5px;
    top:50px;
}
.custom-container{
    position: relative;
}
.custom-row{
    position: relative;
}
.custom-column{
    position: relative;
}
.second-column{
    background-color:coral;
    height: 100px;
}
.overlay{
    position:absolute;
    background-color:rgba(59,160,255,.15);
    border-style: solid;
    border-width: 1px;
    border-color: #3ba0ff;
    pointer-events: none;
}
#overlay-column{
    top: 0px;
    left:0px;
    width: 100%;
    z-index: 5002;
    height: 100%;
}
.overlay-label{
    color:white;
    border-right-style: solid;
    border-right-width: 1px;
    border-right-color: #5eb1ff;
    float:left;
    font-size: 13px;
    line-height: 28px;
    margin-right: 2px;
    padding:0 6px; 
    cursor: default;
}
.overlay-menu-action{
    background-color:#3ba0ff;
    position: absolute;
    padding:0px 2px;
    z-index: 5010;
    cursor: pointer;
    pointer-events: auto;
}

JavaScript

$(document).on({mouseenter: function (e) {
	var elmnt_col = $(this);
	$(elmnt_col).append("<div class='overlay' id='overlay-column'><div class='overlay-menu-action' id='overlay-menu-column'><div class='overlay-label' id='overlay-label-column'>Column</div></div></div>");

	$(elmnt_col).find('#overlay-column').append("<div class='resize-handle ui-resizable-handle ui-resizable-e' id='right-resize-handle'></div>");
	$(elmnt_col).resizable({
		handles: {
			e: '#right-resize-handle'
		}
	});
}, mouseleave: function (e) {
        $("#overlay-column").remove();
    }}, ".custom-column");