JSFiddle - React, Tailwind, and code Playground

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <link href="http://code.jquery.com/ui/1.8.22/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script src="http://code.jquery.com/jquery-1.7.2.js"></script>
    <script src="http://code.jquery.com/ui/1.8.20/jquery-ui.js"></script>
</head>
<body>
    <div>
        <div style="text-align:center;color:green;font-weight:bold;">
            jquery-1.7.2.js | ui/1.8.20/jquery-ui.js
        </div>
        <div style="color:red;font-weight:bold;">Type "t" to search.</div>
        <div>If the problem doesn´t occurs you must riseze this layout decreasing the height to see the problem</div>
        <div>
            <div style="text-align:center;font-weight:bold;">This is OK</div>                        
            <label>FIT OPEN TOP</label>
            <input id="comboFitTop" type="text" />
            <label>FLIP OPEN TOP</label>
            <input id="comboFlipTop" type="text" />
        </div>
        <br/>
        <div>
            <div style="text-align:center;font-weight:bold;">This is OK</div> 
            <label>FIT OPEN BOTTOM</label>
            <input id="comboFitBottom" type="text" />
            <label>FLIP OPEN BOTTOM</label>
            <input id="comboFlipBottom" type="text" />
        </div>
        <div style="position:absolute;bottom:0;">
            <div style="text-align:center;font-weight:bold;">This is OK</div> 
            <label>FIT OPEN BOTTOM: 0</label>
            <input id="comboFitBottomFull" type="text" />
            <label>FLIP OPEN BOTTOM: 0</label>
            <input id="comboFlipBottomFull" type="text" />
        </div>
    </div>
</body>
</html>

CSS

* { margin: 0; padding: 0; list-style: none; border: none; }  

html, body { width:100%; height: 100%; overflow:hidden; }
input[type=text], input[type=password], select, textarea
{
    padding: 3px 6px 3px 3px;
    margin-top: 3px;
    border: 1px solid #C5DBEC;
    width: 50px;
}

JavaScript

var list = ["test1", "test2", "test3", "test4", "test5", "test6", "test7", "test8", "test9", "test10"];

$(document).ready(function () {
    $("#comboFitTop").autocomplete({
        position: { my: "left bottom", at: "left top", collision: "fit" },
        source: list
    });

    $("#comboFlipTop").autocomplete({
        position: { my: "left bottom", at: "left top", collision: "flip" },
        source: list
    });
    
    $("#comboFitBottom").autocomplete({
        position: { my: "left top", at: "left bottom", collision: "fit" },
        source: list
    });

    $("#comboFlipBottom").autocomplete({
        position: { my: "left top", at: "left bottom", collision: "flip" },
        source: list
    });
    
    $("#comboFitBottomFull").autocomplete({
        position: { my: "left top", at: "left bottom", collision: "fit" },
        source: list
    });

    $("#comboFlipBottomFull").autocomplete({
        position: { my: "left top", at: "left bottom", collision: "flip" },
        source: list
    });
});