JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
  <div class="ddl-group" role="group">
    <select class="form-control">
        <option>Shirt</option>
        <option>Pants</option>
    </select>
    <select class="form-control">
        <option>S</option>
        <option>M</option>
        <option>L</option>
    </select>
  </div>

CSS

.ddl-group select {
  float: left;
  width: auto;
}
.ddl-group select:first-child {
  border-radius: 5px 0px 0px 5px;
  border-right: 0px;
}
.ddl-group select:last-child {
  border-radius: 0px 5px 5px 0px;
  width: 37px;
  padding: 0px;
  border-left: 0px;
}