JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<div class="nav-top-searchbar">
<form>
<span class="fa fa-search searchicon" aria-hidden="true"></span>
<input type="text" name="search">
<img src="https://s9.postimg.org/d6s4xvykv/Ellipsis.png" id="ellipsis">
</form>
</div>
<div class="body-manage-attendees">
<div class="container-fluid">
<div class="row">
<div class="col-4 col-sm-4 col-lg-4" style="background-color:white;">
Name
</div>
<div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
Number
</div>
<div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
Table
</div>
<div class="col-2 col-sm-2 col-lg-2" style="background-color:white;">
Bill
</div>
</div>
<div class="row">
<div class="col-4 col-sm-4 col-lg-4" style="background-color:white;">
Amanda Doe
</div>
<div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
250
</div>
<div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
2
</div>
<div class="col-2 col-sm-2 col-lg-2" style="background-color:white;">
Bill
</div>
</div>
<div class="row">
<div class="col-4 col-sm-4 col-lg-4" style="background-color:white;">
Andy Doe
</div>
<div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
14
</div>
<div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
1
</div>
...
CSS
#ellipsis {
top: -30px;
position: relative;
left: 1320px;
}
input[type=text] {
width: 100%;
background: #10314c;
}
.searchicon {
float: left;
margin-top: -20px;
position: relative;
top: 26px;
left: 8px;
color: white;
z-index: 2;
}