JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">
	<div class="header-nav"><a id="branding" href="/">Branding</a></div>
	<div id="left-nav">
		<div class="header-nav"><a href="/global.php">nav item</a></div>
	</div>
</div>

CSS

a { text-decoration: none; }
body { padding: 0; margin: 0; }

#header {
	width: 100%; 
	height: 44px;

	background: #3b3a3b;
	box-sizing: border-box;
}

#branding {	display: inline-block; font-size: 1.5em; font-style: bold; padding: 0 18; color: white; float: left; }
#branding:hover { background: rgba(255,255,255,0.8); color: #3b3a3b; }

#left-nav {
	display: inline-block;
	line-height: 44px;
}

.header-nav {
	display: inline-block;

	font-family: helvetica;
	color: white;
	font-weight: 100;
	text-decoration: none;

	line-height: 44px;
}