JSFiddle - React, Tailwind, and code Playground

HTML

<form id="bookingForm">
        <div class="col-md-6" style="float:right">
            not working due to float:right
            <div class="input-group">
          
                <select style="width:200px;" class="form-control">
                    <option>
                        hr
                    </option>
                    <option>
                        hr2
                    </option>
                </select>
            </div>
</div>
            <div class="col-md-6">
                Working but not in the right place (no float:right)<br/>
            <div class="input-group">
          
                <select style="width:200px;" class="form-control">
                    <option>
                        hr
                    </option>
                    <option>
                        hr2
                    </option>
                </select>
            </div>
        </div>

</form>

CSS

.input-group {
    width:100%;
    display: inline-block;
    list-style: outside none none;
}
.input-group select {
	padding: 0 10px;
    
    -webkit-appearance:none;
    border: 1px solid #cccccc;
    -webkit-border-radius: 4px;
    border-radius: 20px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    height: 30px;

    background:...