JSFiddle - React, Tailwind, and code Playground

HTML

<div style="float:left;display:inline-block">
    <div id="ops" class="utilities_div" data-type="0">&nbsp;&nbsp;
        <div style="display: block; color: white; cursor: pointer;" id="pop_ctrl"><i class="fa fa-plus"></i>&nbsp;&nbsp;Add Data</div>
        <ul style="display: none; position: relative; top: 0px; left: 0px; background: rgb(128, 0, 0) none repeat scroll 0% 0%; width: 100%; float: left; padding: 0px; border-radius: 10px;" id="demo_ul">
            <li style="display: block; color: rgb(255, 255, 255); float: left; text-align: center; border-radius: 10px;" class="demo_li">
                <div><i class="fa fa-sort-numeric-asc"></i>
                </div>&nbsp;&nbsp;
                <div>Number</div>
            </li>
        </ul>
    </div>
</div>

CSS

.utilities_div {
    display: inline-block;
    background-color: black;
}
#demo_ul {
    position: absolute !important;
    top: 0px;
    margin: 0px;
    background-color:white;
}
.demo_li {
    word-wrap: break-word;
    padding: 10px;
    background-color: red
}