JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2-bootstrap.min.css">
<select id="estado" class="form-control">
    <option value="SP" title="São Paulo">SP</option>    
    <option value="RJ" title="Rio de Janeiro">RJ</option>
    <option value="SC" title="Santa Catarina">SC</option>    
</select>

CSS

li.select2-highlighted .text-muted {
  color: #DBDBDB;
}

JavaScript

$("#estado").select2({

        formatResult : function(item) {
            var markup = '<div class="row">' +
                 '<div class="col-lg-12">' + item.text + '</div>' +
                 '</div>' +
                 '<div class="row">' +
                 '<div class="col-lg-12 text-muted">' + item.element[0].title + '</div>' +
                 '</div>';

              return markup;
        }
});