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>
    <div class="search toggle-off">
      <span class="fa fa-search searchicon" aria-hidden="true"></span>
      <input type="text" name="search">
    </div>
    <div style="">
      <img tabindex="1" src="https://s9.postimg.org/d6s4xvykv/Ellipsis.png" id="ellipsis">
      <div class="dropdown">
        <li><a href="#">View Status</a><i class="fa fa-angle-down" aria-hidden="true"></i></li>
        <li><a href="#">Release Bills</a><i class="fa fa-angle-down" aria-hidden="true"></i></li>
        <li><a href="#">Add Attendee</a><i class="fa fa-angle-down" aria-hidden="true"></i></li>
        <li><a href="#">Export as</a><i class="fa fa-angle-down" aria-hidden="true"></i></li>
        <li><a href="#">View in Google Sheets</a><i class="fa fa-angle-down" aria-hidden="true"></i></li>
        <li><a href="#">Send Notifications</a><i class="fa fa-angle-down" aria-hidden="true"></i></li>
      </div>
    </div>


  </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"...

CSS

#ellipsis {
  top: 12px;
  position: absolute;
  right: 43px;
}

#ellipsis:focus {
  outline: none;
}

#ellipsis:focus+.dropdown {
  display: block;
}

.search {
  border: 1px solid red;
  position: relative;
	transition: 0.2s linear;
	width: 85%;
}

.search.toggle-off {
	width: 22px;
	transition: 0.2s linear;
}

.search .searchicon {
  position: absolute;
  right: 0;
  width: 22px;
  background: red;
  color: white;
  border: 1px solid #FFFFFF;
  z-index: 2;
  padding: 3px;
}

.search input[type=text] {
  width: calc(100% - 22px);
  background: #10314c;
}

.dropdown {
  background-color: #FFFFFF;
  display: none;
  padding-left: 2%;
  position: absolute;
  height: 150px;
  right: 0;
  width: 200px;
  z-index: 10;
  list-style-type: none;
}

.dropdown a {
  color: #676767;
  font-weight: bold;
  font-size: 14px;
}

.dropdown li:hover {
  background-color: #EDEDED;
}

JavaScript

var searchicon = document.querySelector(".searchicon"),
search = document.querySelector(".search");

searchicon.addEventListener("click", function(){
	if(search.classList.contains("toggle-off")){
		search.classList.remove("toggle-off");
	}
	else{
		search.classList.add("toggle-off");
	}
});