JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/flick/jquery-ui.css">
Hello
<div class='A'>
    select:
    <div class='B'>
        <input id='X' />
    </div>
</div>
World

CSS

.B {
    display: none;
}

.A:hover .B {
    display: block;
    background-color: blue;
}

.A {
   background-color: orange;   
}

div {
    padding: 12px;
    margin: 24px  
}

JavaScript

$("#X").autocomplete({
    source: ['abc', 'def', 'ghi'],
    open: function($event, ui) {
        var $widget = $("ul.ui-autocomplete");
        var $input = $("#X");
        var position = $input.position();
        
        $("div.B").append($widget);

        $widget.css("left", position.left + $input.width());
        $widget.css("top", position.top);       
    }
});