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>
<div class="form-group">
    <label for="skill" class="col-sm-2 control-label">Skill</label>
    <div class="col-sm-10">
        <input id="select02" style="width: 100%"></input>
    </div>
</div>

CSS

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

JavaScript

var select01 = $('#select01');
var select02 = $('#select02');
var select03 = $('#select03');
var select04 = $('#select04');

$(select01).select2({
    data: [{
        id: 0,
        text: "test01"
    }, {
        id: 1,
        text: "test02"
    }, {
        id: 2,
        text: "test03"
    }, {
        id: 3,
        text: "test04"
    }, {
        id: 4,
        text: "test05"
    }]
});
$(select02).select2({
    data: [{
        id: 0,
        text: "test01"
    }, {
        id: 1,
        text: "test02"
    }, {
        id: 2,
        text: "test03"
    }, {
        id: 3,
        text: "test04"
    }, {
        id: 4,
        text: "test05"
    }]
});
$(select03).select2({
    data: [{
        id: 0,
        text: "test01"
    }, {
        id: 1,
        text: "test02"
    }, {
        id: 2,
        text: "test03"
    }, {
        id: 3,
        text: "test04"
    }, {
        id: 4,
        text: "test05"
    }]
});
$(select04).select2({
    data: [{
        id: 0,
        text: "test01"
    }, {
        id: 1,
        text: "test02"
    }, {
        id: 2,
        text: "test03"
    }, {
        id: 3,
        text: "test04"
    }, {
        id: 4,
        text: "test05"
    }]
});