JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://rawgithub.com/twbs/bootstrap/master/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.full.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<div class="form-group">
    <label for="Branch name" class="col-sm-2 control-label">Branch name</label>
    <div class="input-icon">
       
    <div class="col-sm-10">
        <input id="select02" style="width: 100%">
    </div>
    </div>
</div>

CSS

.main-content-ok {
    margin-left: 100px;
    /*  */
    padding: 10px;
}
.main-content-ko {
    margin-left: 110px;
    /*  */
    padding: 10px;
}

JavaScript

var select02 = $('#select02');

$(select02).select2({
    data: [{
        id: 0,
        text: "test01"
    }, {
        id: 1,
        text: "test02"
    }, {
        id: 2,
        text: "test03"
    }, {
        id: 3,
        text: "test04"
    }, {
        id: 4,
        text: "test05"
    }],
     placeholder: "<i class='fa fa-sitemap'></i>Branch name",
});