JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div id="navWrap"> 
  <header>
        <div class="mainContainer">
          <div id="logoWrap" class="img-responsive col-md-12 col-sm-12 col-xs-12">
            <img src="images/decorum_partA.png" alt=""/>
            <img class="hidden-sm hidden-xs" src="images/decorum_partB.png" alt=""/>
          </div>
          <div id="rightWrap" class="col-md-12 col-sm-12 col-xs-24">
              <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
              
              
              
            <div class="rightBox col-xs-12 pull-right">
              <div class="col-xs-12 blackBox">
                <span class="textInBox">SUBSCRIBE FOR OFFERS</span>
                <a href="#"><span class="icon-icn-sort_down iconHeader pull-right"></span></a>
              </div>
              <div class="col-md-12 col-sm-12 col-xs-12 greyBox">
                <span class="textInBox">020 8969 6581</span>
                <a href="#"><span class="icon-icn-phone2 iconHeader pull-right"></span></a>
              </div>
              <div class="col-md-12 col-sm-12 col-xs-12  greyBox">
                <span class="textInBox">CONTACT US</span>
                <a href="#"><span class="icon-icn-envelope iconHeader pull-right"></span></a>
              </div>
            </div>
          </div>
          <img id="logoOnlyBottles" class="img-responsive hidden-md visible-sm visible-xs clearfix" src="images/decorum_cheat.png" alt=""/>
       ...

CSS

.mainContainer{
    margin-left:7%;
    margin-right:7%;
    padding-bottom:1%;
    overflow:hidden; 
}
.bigContainer{
    margin-left:7%;
    margin-right:7%;  
}

/*Header*/
header{
    background-color:#585077;
}
#logoWrap{
    padding:0;
}
#logoWrap img{
    display:block; 
}
.clearfix{
    clear:both;
}

#rightWrap{
    padding:0;
}
.rightBox{
    margin-top:5%;
    padding:0;
}
#rightWrapSmall{
    z-index:99;
}
.blackBox, .greyBox{
    padding:0;
    line-height:1.8;
}
.blackBox span.iconHeader{
    padding:1.5%;
    position: absolute;
    right: 0;
}
.greyBox span.iconHeader{
    padding:1.2%;
}
.greyBox{
    margin-top: 0.5%;
}
.iconHeader{
    vertical-align: middle;
}
.textInBox{
    padding-left: 5%;
    padding-right: 10%;
}

/*Navigation bar*/
#navbar{
    padding:0;
}
.navbar{
    border-radius:0;
    min-height:40px;
}
.navbar.navbar-default{
    border:0;
    margin:0;
    padding:0;
}
.navbar-default .navbar-nav > li > a{
    color:#e0e0e0;
    
}
.navbar-nav > li > a {
    padding-top:10px;
    padding-bottom:11px;
}
#navWrap{
    background-color:#808080;
}
#arrowSearch2{
    display:none;
}
.navigationWrap{
    padding:0;
}
.naviContainer{
    margin-left:7%;
    margin-right:7%;
}

/*search o wines*/
#iconSearchBox span.icon-icn-bottle{
    position:absolute;
    right:12%;
    margin-top: 4px;
}
#iconSearchBox span.icon-icn-sort_down, #iconSearchBox span.icon-icn-sort_up{
    position:absolute;
    right: 2%;
    top: 25%;
}
#searchOurWines{
    line-height: 1.8;
    margin-top: 2px;
margin-bottom: 2px;
}
.arrowBoxes{
display: inline;
float: right;
padding-right: 2%;
border-left: 1px solid white;
padding-left: 2%;
margin-top: 1px;
}
.arrowBoxes a{
    color:white;
    font-size:1.2em;
    text-decoration:none;
}
/*Inside search wine box*/
#browseContent{
    display:none;
    position: absolute;
    z-index: 999;
    width: 100%;
}
.winesList{
    height:100%;
    line-height: 1.5;
    list-style:none; 
    margin-top:10%;
   ...

JavaScript

$(document).ready(function() {
        $('#arrowSearch').click(function() {
                  $('#browseContent').toggle();
                  $('#arrowSearch').css("display", "none");
                  $('#arrowSearch2').css("display", "inline");
                  return false;
              });
              $('#arrowSearch2').click(function () {
                  $('#browseContent').toggle();
                  $('#arrowSearch2').css("display", "none");
                  $('#arrowSearch').css("display", "inline");
                  return false;
              });
          });