JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="table" id="header-table">
	<div class="table-row" id="header-row">
		<div class="table-cell" id="top-left-div">
			<a class="navbar-brand" href="#">My Subreddits &#9660;</a>
			<a class="navbar-brand" href="#">Popular</a>
			<a class="navbar-brand" href="#">All</a>
			<a class="navbar-brand" href="#">Random</a>
		</div>
		<div class="table-cell" id="top-right-div">
			<span class="navbar-brand">
				Want to join? <a href="#">Log in or sign up</a> in seconds | <button class="glyphicon glyphicon-wrench tools-icon"></button>
			</span>
		</div>
	</div>
</div>

CSS

.table { display: table; }
.table-row { display: table-row; }
.table-cell { display: table-cell; }
.navbar-brand { float: none; }

#header-table { background-color: rgba(255,255,0,1); }
#header-row { background-color: rgba(0,0,0,0.7); }
#top-left-div {
	max-width: 100px;
	overflow: hidden;
	white-space: nowrap;
}
#top-left-div a.navbar-brand { text-transform: uppercase; }
#top-right-div {
	width: 420px;
	min-width: 420px;
}