JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div id="option-selection">
<h3>Select an Option</h3>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Available Options  <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Option</a>
</li>
<li><a href="#">Option</a>
</li>
<li><a href="#">Option</a>
</li>
<li><a href="#">Option</a>
</li>
<li><a href="#">Option</a>
</li>
<li><a href="#">Option</a>
</li>
<li><a href="#">Option</a>
</li>
<li><a href="#">Option</a>
</li>
<li><a href="#">Option</a>
</li>
<li><a href="#">Option</a>
</li>
</ul>
</div>
<!--dropdown-->
</div>
<!--option selection-->
CSS
#option-selection {
text-align: center;
padding-top: 5px;
padding-bottom: 25px;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
.open>.dropdown-menu {
width: 160px;
left: 50%;
margin-left: -80px;
}