JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<div class="col-sm-3 col-md-3">
  <form class="" role="search">
    <div class="input-group">
    <div class="input-group-btn">
        <button class="btn btn-default dropdown" type="button">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span id="SelectedOption">Dropdown </span><b class="caret"></b></a>

        <select class="dropdown-menu">
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
        </select>
        
        </button>
      </div>
      <input type="text" class="form-control" placeholder="Search" name="q">
      <div class="input-group-btn">
        <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
      </div>
    </div>
  </form>
</div>

CSS

.dropdown-menu{
  min-width: 100px !important;
  font-size:12px;
  text-align:left;
  padding:3% 10%;;
}
.dropdown{
  width:100%;
  height:32px;
}

JavaScript

$(".dropdown-menu li").click(function(){
	var valueSelected = $(this).attr('value');
  $("#SelectedOption").text(valueSelected);
});