JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" style=border:solid;>
        <div style="width: 160px; margin: 0 auto; border: solid;">
            <label for="Search" style="">Search</label>
            <input type="text" name="Search" id="Search" placeholder="Search" style="width: 125px" />
            <a class="icon-btn" href="#" style="">
                <i class="icon-magnifier-dark" style=""></i>
            </a>
        </div>
    </div>
    
        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 " style="border:solid;">
        <div style=" display: inline-block; margin: 0 auto; border: solid;">
            <label for="dropdownMenu2">Drop Down</label>
            <div class="dropdown" style="">
                <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="">
                    option 1
                    <span class="caret" style=""></span>
                </button>

                <ul class="dropdown-menu" aria-labelledby="dropdownMenu2" style="">
                    <li>
                        <a href="#">Option 1 asdasdasd</a>
                    </li>
                    <li>
                        <a href="#">Option 2</a>
                    </li>
                    <li>
                        <a href="#">Option 3</a>
                    </li>
                    <li>
                        <a href="#">Option 4</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>