JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.githubusercontent.com/cjstewart88/chosen/templates/chosen/chosen.jquery.js"></script>
<select class="my-select" id="my-select" style="width:350px;" tabindex="2">
  <option data-img-src="http://i.stack.imgur.com/8lgcm.jpg">Project A</option> 
  <option data-img-src="https://www.gravatar.com/avatar/ecb87e13fc7cc038a774e2785f217f8a?s=24&d=identicon&r=PG">Project B</option> 
</select>
<br>
<a href="https://github.com/djgrant/chosen-image">Chosen Image</a>

CSS

small {
    width: 100px;
    display: inline-block;
}
ul {
    width: 150px;
    list-style-type: none;
}
ul li {
    padding: 5px 10px;
    border: 1px solid red;
}
img, .left {
    display: inline-block;
}
.left {
    width: 50px;
    margin: 0 0 0 5px;
}

JavaScript

$(function () {
    $('.chosen').chosen({
        template: function (text, templateData) {
            return "<img src='" + templateData.icon + "'></img><div class='left'><span>" + text + "</span>" + "</br><small>social media</small></div>";
        }
    });
});