JSFiddle - React, Tailwind, and code Playground

by davidliang2008

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css">
<link rel="stylesheet" href="//select2.github.io/select2-bootstrap-theme/css/select2-bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.full.js"></script>
<div class="container">
	<div class="input-group">
		<select class="form-control select2" placeholder="Search"></select>
		<div class="input-group-append">
			<button class="btn btn-success" type="submit">Go</button>
		</div>
	</div> 
</div>

CSS

.input-group > .select2-container--bootstrap {
	width: auto;
	flex: 1 1 auto;
}

.input-group > .select2-container--bootstrap .select2-selection--single {
	height: 100%;
	line-height: inherit;
	padding: 0.5rem 1rem;
}

JavaScript

$(function(){
	$(".select2").select2({
		theme: "bootstrap",
		placeholder: "Search"
	});
});