JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
<div id="item_add">
    <header>X</header>
    <div class="body">
        <button id="item_element_new">Example</button>
    </div>
    <div class="arrow"></div>
</div>

CSS

.item {
	border: 1px solid #e2e2e2; 
	margin: 6px;
	padding: 0px 10px 0px 10px;
	position: relative; 
    height: 40px;
	}
.wrap {
    margin-left: 8em;
}
#item_new {
    border: 1px dashed #C0C0C0 !important;
    background: none repeat scroll 0% 0% #F7F7F7;
    display: block;
    height: 2.2em;
    margin: 6px;
    padding: 0px 10px;
    position: relative;
}
#item_add {
    display: none;
    position: absolute;
    width: 2em;
    border: 1px solid #ddd;
    background-color: #f7f7f7;
    color: #aaa;
    padding: 0px 6px;
}
#item_add .body {
    display: none;
}
#item_add .arrow {
    width: 0px;
    height: 0px;
    -webkit-transform:rotate(360deg);
    border-style: solid;
    border-width: 5px 0 5px 7px;
    border-color: transparent transparent transparent #f7f7f7;
    top: 5px;
    right: -7px;
    position: absolute;
}
#item_add button {
    background: none repeat scroll 0px center #fff;
    padding: 0.2em 2em;
    margin: 3px .2em;
}

JavaScript

$(document).on('mouseenter', '.item', function (event) {
    var item = $(this);
    $('#item_add').css({
        "left": '5.5em',
        "top": item.offset().top - 15
    }).show();

    $('#item_add').hover(function () {
        var menue = $(this);
        menue.animate({
            "width": '7em',
            "left": '0.5em'
        }, 200, function () {
            $(this).find(".body").stop().slideDown(200);
        });
    }, function () {
        var menue = $(this);
        menue.find(".body").stop().slideUp(200, function () {
            menue.animate({
                "width": '2em',
                "left": '5.5em'
            }, 200);
        });
    });
$('#item_element_new').unbind();
    $('#item_element_new').hover(function () {
        item.after('<div id="item_new"></div>');
    }, function () {
        $('#item_new').remove();
    });

});