JSFiddle - React, Tailwind, and code Playground

by maysamsh

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<header class="navbar">
        <div class="container-fluid expanded-panel">
            <div class="row" dir="rtl">
                <div class="col-sm-5">
                    3

                </div>
                <div class="col-sm-2">
                    2
                </div>
                <div class="col-sm-5">
                    <div style="display: table-cell; height: 50px; vertical-align: middle;">

                        <button type="button" class="btn btn-default navbtn">
                            <span class="glyphicon glyphicon-leaf"></span>
                        </button>
                        <button type="button" class="btn btn-default navbtn" >
                            <span class="glyphicon glyphicon-cog"></span>
                        </button>
                        <div id="navbar-search">
                            <button type="button" class="btn btn-default navbar-search-btn" >
                                <span class="fa fa-search"></span>
                            </button>
                            <input type="search" class="navsearch" />
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </header>

CSS

.navbar{
    background-color:#fff;
    border-bottom:#eee solid 1px;
}
.navbtn {
    font-size:large;
}
.navsearch{
    text-align: right;
    -webkit-border-radius: 15px 0 0 15px;
    border-radius: 15px 0 0 15px;
    outline: none;
    background: #eee;
    cursor: inherit;
    display:inline-block;
    border:none;
    padding:5px;
    height:35px;
}
#navbar-search{
    display:inline-block;
    float:none;
    margin-top:10px;
}
.navbar-search-btn{
    -webkit-border-radius: 0 15px 15px 0;
    border-radius: 0 15px 15px 0;
    display:inline;
    float:right;
    border:none;
    background: #eee;
    height:35px;

}