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">
<link rel="stylesheet" href="https://rawgithub.com/twbs/bootstrap/master/dist/css/bootstrap.min.css">

		<div class="form-group">
		<label class="control-label" for="select02">Select 02</label>
            <div class="col-xs-4">
			<input type="hidden" id="select02" style="width: 100%" />
            </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"}
    ]
});