JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
<div class="col-xs-4">
			<div class='row'>
				<div class='col-sm-12'>
					<div class='form-group'>
						<label for="itemLaborCode">Code</label>
						<div class="row form-group">
							<div class="col-md-12 form-group"><input id="itemLaborCode" class="form-control" type="text" autocomplete="off"></div>
							<div class="col-md-12"><p class='form-group' id="itemLaborDesc">Test</p></div>
						</div>
					</div>
				</div>
			</div>
		</div>
    
    <div class="col-xs-4">
			<div class='row'>
				<div class='col-sm-12'>
					<div class='form-group'>
						<label for="test">Code</label>
						<div class="row form-group">
							<div class="col-md-12 form-group"><input id="test" class="form-control" type="text" autocomplete="off"></div>
							<div class="col-md-12"><p class='form-group' id="boom">Test</p></div>
						</div>
					</div>
				</div>
			</div>
		</div>

CSS

.dropdown-menu { display: block; width: 100%; }

JavaScript

!function($){"use strict";var Typeahead=function(element,options){this.$element=$(element),this.options=$.extend({},$.fn.typeahead.defaults,options),this.matcher=this.options.matcher||this.matcher,this.sorter=this.options.sorter||this.sorter,this.select=this.options.select||this.select,this.autoSelect="boolean"==typeof this.options.autoSelect?this.options.autoSelect:!0,this.highlighter=this.options.highlighter||this.highlighter,this.updater=this.options.updater||this.updater,this.source=this.options.source,this.$menu=$(this.options.menu),this.shown=!1,this.listen(),this.showHintOnFocus="boolean"==typeof this.options.showHintOnFocus?this.options.showHintOnFocus:!1};Typeahead.prototype={constructor:Typeahead,select:function(){var val=this.$menu.find(".active").data("value");return(this.autoSelect||val)&&this.$element.val(this.updater(val)).change(),this.hide()},updater:function(item){return item},setSource:function(source){this.source=source},show:function(){var scrollHeight,pos=$.extend({},this.$element.position(),{height:this.$element[0].offsetHeight});return scrollHeight="function"==typeof this.options.scrollHeight?this.options.scrollHeight.call():this.options.scrollHeight,this.$menu.insertAfter(this.$element).css({top:pos.top+pos.height+scrollHeight,left:pos.left}).show(),this.shown=!0,this},hide:function(){return this.$menu.hide(),this.shown=!1,this},lookup:function(query){var items;return this.query="undefined"!=typeof query&&null!==query?query:this.$element.val()||"",this.query.length<this.options.minLength?this.shown?this.hide():this:(items=$.isFunction(this.source)?this.source(this.query,$.proxy(this.process,this)):this.source,items?this.process(items):this)},process:function(items){var that=this;return items=$.grep(items,function(item){return...