JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div id="container-one">
    <div class="draggable" id="drag-block"></div>
    
</div>

<div id="container-two">
    <div class="static-block" id="block-one"></div>
    <div class="static-block" id="block-two"></div>
    <div class="static-block" id="block-three"></div>
</div>
<p>
Drag the purple block.  Why does the helper go behind the blue blocks?!
</p>

CSS

#container-one {
    background-color: orange;
    width: 200px;
    height: 400px;
    display: inline-block;
}

#drag-block {
    background-color: purple;
    color: white;
    text-align: center;
    height: 50px;
    width: 50px;
    
}

#container-two {
    background-color: green;
    height: 400px;
    width: 500px;
    display: inline-block;
}

.static-block {
    height: 80px;
    width: 40px;
    background-color: cornflowerblue;
}

#block-one {
    position: relative;
    top: 0;
    left: 40px;
}

#block-two {
    position: relative;
    top: 50px;
    left: 70px;
}

#block-three {
    position: relative;
    top: 25px;
    left: 140px;
}

.drag-helper {
    color: yellow;
    text-shadow: 1px 1px 2px #363636;
}

p {
    font-size: 14pt;
}

JavaScript

$(function(){
    $('.draggable').draggable({
        cursorAt: { bottom: 0, left: 20 },
      	helper: function( event ) 
      	{
        	return $( "<div class='drag-helper'><h2><i class='fa fa-plus-circle'></i></h2></div>" );
    	}
    });
});