JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css">
<input id="tags" style="width: 300px" />
<div id="appender" style="position: absolute">
    <span id="faux" style="display:none" />
</div>

JavaScript

$(function() {
		var availableTags = [
			"ActionScript",
			"AppleScript",
			"Asp",
			"BASIC",
			"C",
			"C++",
			"Clojure",
			"COBOL",
			"ColdFusion",
			"Erlang",
			"Fortran",
			"Groovy",
			"Haskell",
			"Java",
			"JavaScript",
			"Lisp",
			"Perl",
			"PHP",
			"Python",
			"Ruby",
			"Scala",
			"Scheme"
		];
        var appender = $('#appender');
        var tags = $("#tags");
        var faux = $("#faux");
        appender.css("top", tags.position().top + tags.height());
		tags.autocomplete({
			source: availableTags/*,
            appendTo: "#appender"*/
        }).on("keyup", function() {
            var off = tags.selectionStart;
            faux.text(tags.val().substring(0, off).replace(/\s/g, "\u00a0"));
            tags.autocomplete('option', 'position', {my: "left top", at: "left+" + faux.outerWidth() + " bottom"});
            //appender.css("right", tags.position().left + faux.outerWidth());
        });
	});