JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="nav_menu">
		<nav class="nav_wrapper" role="navigation">
				<ul class="nav navbar-nav navbar-left">
						<li data-item-id="nav-profile-menu">
							<a id="menu_toggle"><i class="fa fa-bars"></i></a>
						</li>
					</ul>
        <ul class="nav navbar-nav navbar-center">
          <li data-item-id="nav-profile-menu">
              <a class="summary" data-toggle="tooltip" title="" data-placement="bottom" data-original-title="usd">
                  <span class="summary-item">USD</span>
                  <span>
                     <i class="fa fa-arrow-circle-o-down red hidden-sm hidden-xs" aria-hidden="true"></i>
                      99&nbsp;<span class="small-text hidden-sm hidden-xs">-0,0474</span>
                  </span>
              </a>
          </li>
          <li data-item-id="nav-profile-menu">
              <a class="summary">
                  <span class="summary-item">Brent</span>&nbsp;
                  <span>
                      <i class="fa fa-arrow-circle-o-down red hidden-sm hidden-xs" aria-hidden="true"></i>
                      99&nbsp;<span class="small-text hidden-sm hidden-xs">-0,86%</span>
                  </span>
              </a>
          </li>
          <li data-item-id="nav-profile-menu" class="hidden-xs">
              <a class="summary">
                  <span class="summary-item">Ni</span>&nbsp;
                  <span>
                      <i class="fa fa-arrow-circle-o-up green hidden-sm hidden-xs" aria-hidden="true"></i>
                      105,00&nbsp;<span class="small-text hidden-sm hidden-xs">1,29%</span>
                  </span>
              </a>
          </li>
          <li data-item-id="nav-profile-menu" class="hidden-xs">
              <a class="summary">
                  <span...

CSS

body {
    position: relative;
    color: #45515d;
    background: #3c4d5f;
    font-size: 14px;
    font-weight: 400;
    bottom: 0;
    overflow-x: hidden;
    height: 100%;
}
.nav_menu {
    float: left;
    background: #ededed;
    border-bottom: 1px solid #d9dee4;
    margin-bottom: 10px;
    width: 100%;
    position: relative;
    line-height: 1.41;
}
.nav_wrapper{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row wrap;
					flex-flow: row wrap;
	text-align: center;
	justify-content: space-between;
	//align-items: stretch;
}
.nav_wrapper > * {
	flex: 1 100%;
}
.navbar-left{
	order: 1;
	flex: 1 auto;
	justify-content: flex-start;
	//max-width: 45px;
}
.navbar-center{
	order: 2;
	flex: 3 0px;
	justify-content: center;
	align-items: center;

}
.navbar-auth{
	order: 3;
	flex: 1 auto;
	justify-content: flex-end;
	margin-left: auto;
	float: right;
	//align-items: center;
	max-width: 250px;
}