JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ivaynberg.github.com/select2/select2-master/select2.js"></script>
<link rel="stylesheet" href="http://ivaynberg.github.com/select2/select2-master/select2.css">
<select class="foo">
    <option value="codex">description 1</option>
    <option value="codey">description 2</option>
    <option value="cod">description 3</option>
    <option value="code">description 4</option>
</select>

CSS

.selectBoxOptionCode {
    width: 55px;
    text-align: right;
    margin-right: 10px;
    display: inline-block;
}

JavaScript

function selectBoxOptionFormat(state) {
    var originalOption = state.element;
    return "<span class='selectBoxOptionCode'>" + state.id + "</span>        <span>" + state.text+ "</span>";    
}

$(".foo").select2({
    width:"350px",
    formatResult: selectBoxOptionFormat,
    matcher: function(term, text,v) { 
        var txt = $(v).val() + ' ' + text;       
        return txt.toUpperCase().indexOf(term.toUpperCase())==0; }
});