JSFiddle - React, Tailwind, and code Playground

by LW

HTML

<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
        <img id="logo" src="http://i.imgur.com/yhGyJ8P.png" />
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse"> <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="collapse navbar-collapse" id="example-navbar-collapse">
        <div class="container-fluid">
            <ul class="nav navbar-nav">
                <li><a href="#">Search</a>
                </li>
                <li><a href="#">Archives</a>
                </li>
                <li><a href="#">Education</a>
                </li>
                <li><a href="#">About</a>
                </li>
            </ul>
            <br />
            <ul class="nav navbar-nav">
                <li><a href="#"><i class="glyphicon glyphicon-road"></i></a>
                </li>
                <li><a href="#"><i class="glyphicon glyphicon-leaf"></i></a>
                </li>
                <li><a href="#"><i class="glyphicon glyphicon-phone"></i></a>
                </li>
                <li><a href="#"><i class="glyphicon glyphicon-link"></i></li>
            </ul>
          </div>
          <span class="additional-text">This is your additional text</span>
        </div>

    </nav>

CSS

/*md+ DESKTOP */
 @media (min-width: 768px) {
    .collapse.navbar-collapse .nav.navbar-nav:first-child {
        border-bottom: 1px solid grey;
    }
    .collapse.navbar-collapse .container-fluid {
        float:right;
    }
    .additional-text {
        position:absolute;
        bottom:0px;
        margin-bottom:8px;
        margin-left:8px;
        font-size:22px;
        color:grey;
        cursor:arrow;
    }
}
/* md- overrides MOBILE */
 @media (max-width: 767px) {
    .collapse.navbar-collapse .nav.navbar-nav:first-child {
        border-bottom: 1px solid lightgrey;
        margin-bottom: 0px;
    }
    .collapse.navbar-collapse .nav.navbar-nav:first-child li:last-child {
        border-bottom: 1px solid lightgrey;
        margin-bottom: 0px;
    }
    .collapse.navbar-collapse .nav.navbar-nav:last-child li:first-child a {
        padding-top: 0px;
    }
    .navbar-header img {
        max-height:80px;
    }
    .collapse.navbar-collapse.in .nav.navbar-nav {
        float:none !important;
        display:block;
    }
    .additional-text {
        position:relative;
        font-size:22px;
        display:none;
    }
}