JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <div class="input-group">
                    <input class="col-lg-3 col-md-3 col-sm-5 col-xs-5 form-control" type="text" id="searchroleName" placeholder="Search here"  aria-describedby="basic-addon2"/>
                    <span class="input-group-addon fa fa-search"  id="basic-addon2"></span>
                </div>
                <div class="clearfix">
                &nbsp;
                </div>
                
                 <div class="input-group">
                    <span class="input-group-addon fa fa-search"  id="basic-addon2"></span>
                    <input class="col-lg-3 col-md-3 col-sm-5 col-xs-5 form-control" type="text" id="searchroleName" placeholder="Search here"  aria-describedby="basic-addon2"/>
                </div>

CSS

.input-group .fa-search{
  display: table-cell;
}