JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css">
<header>
  <div class="logo" role="navigation"> </div>
  <div class="page-nav-right" role="navigation"> </div>
  <div class="searchBar-form">
    <i class="icon-search"></i>
    <div class="search-form-container">
      <form class="search" method="get" action="http://www.google.com">
        <input type="text" class="text-input" size="21" maxlength="120">
        <div class="dropdown search-options">
          <a class="dropdown-title search-options-toggle" href="#/">
            <i class="icon-cut"></i>
          </a>
          <ul class="dropdown-values search-options-container">
            <li>OPTION 1</li>
            <li>OPTION 2</li>
            <li>OPTION 3</li>
            <li>OPTION 4</li>
            <li>OPTION 5</li>
          </ul>
        </div>
        <div class="separator"></div>
        <div class="icon">
          <i class="icon-search"></i>
        </div>
        <input type="submit" value="">
      </form>
    </div>
  </div>
</header>
<a href="#" class="show_hide" id="plus">+</a>

CSS

.show_hide {
  display: none;
}

header {
  position: relative;
  top: 0px;
  z-index: 300;
  width: 100%;
  height: 48px;
  background-color: blue;
}

.logo {
  height: 100%;
  width: 200px;
  margin: 0;
  padding: 0;
  float: left;
  background-color: red;
}

.page-nav-right {
  display: inline-block;
  height: 100%;
  width: 200px;
  margin: 0;
  padding: 0;
  float: right;
  background-color: red;
}

.searchBar-form {
  margin: 0 auto;
  max-width: 40%;
  display: block;
}


}
.dropdown {
  background: #313654;
  display: inline-block;
  cursor: pointer;
  float: right;
}
.dropdown:hover {
  background: grey;
  color: white;
}
.dropdown:hover .dropdown-values {
  background: orange;
  color: white;
}
.activated {
  background: orange;
}
.dropdown-title {
  display: block;
  padding: 5px 10px 5px 10px;
  font-size: 13px;
  font-weight: bold;
  color: #FFF;
}
.dropdown-values {
  position: absolute;
  right: 0px;
  top: 100%;
  background: #3f4c6b;
  padding: 10px;
  display: none;
  width: 100%;
  box-sizing: border-box;
}
.dropdown-values a {
  display: block;
}
.dropdown-values a:HOVER {
  background: #dedede;
  display: block;
}
.search input[type=submit] {
  padding: 0;
  border: none;
  content: "";
  position: absolute;
  right: 2px;
  top: 2px;
  bottom: 2px;
  height: 34px;
  line-height: 34px;
  width: 42px;
  cursor: pointer;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  -moz-opacity: 0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5;
  outline: 0;
}
.search input[type=submit]:hover {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  -khtml-opacity: 0;
  opacity: 0;
}
.search input {
  color: #fff;
  background-color: transparent;
  border: 2px solid #fff;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  font-size: 18px;
  padding: 7px 87px 6px 10px;
  width: 100%;
}
.search {
  position:...

JavaScript

$(".dropdown").click(function(event) {
  event.stopPropagation();
  $(this).parent().find(".dropdown").not(this).find(".dropdown-values").fadeOut(500);
  $(this).parent().find(".dropdown").not(this).find(".dropdown-title").removeClass("activated");
});
$(document).click(function(event) {
  $(".dropdown-values").fadeOut(500);
  $(".dropdown-title").removeClass("activated");
});
$(".dropdown-title").click(function(event) {
  $(this).siblings(".dropdown-values").fadeToggle(500);

  $(this).parents(".dropdown").find('.dropdown-title').toggleClass("activated");
});
$(".icon-search").click(function(event) {
  $(this).siblings(".search-form-container").fadeToggle(500);

  $(this).parents(".searchBar-form").find('.icon-search').toggleClass("activated");
});