JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header-container">
			<div id="header-logo">
				Logo
			</div>
			
			<div id="header-nav">
				<div id="nav-container">
					<ul class="nav">
						<li><a href="#">Home</a></li>
						<li><a href="#">News</a></li>
						<li><a href="#">Contact</a></li>
						<li><a href="#">About</a></li>
					</ul>
				</div>
			</div>
		</div>

CSS

#header-container
{
	position: fixed;
	height:55px;
	width: 100%;
	color:#FFFFFF;
	font-size:0;
	background: rgba(0,168,225,0.25);
}

#header-logo
{
	position:relative;
	display:inline-block;
	height:100%;
	width:45%;
	margin:0;
	padding:0;
	font-size:22px;
	background-color:#CCCCCC; /*debug*/
}

#header-nav
{
	position:relative;
	display:inline-block;
	height:100%;
	width:55%;
	margin:0;
	padding:0;
	font-size:22px;
	background:linear-gradient(to right, rgba(0,168,225,0.7) 0%, rgba(0,45,91,0.8) 60%);
}

#logo-container
{
}

#nav-container
{
	height:55px;
	width:95%;
	font-size:22px;
	color:#FFFFFF;
	text-align:center:
}

ul.nav
{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

ul.nav li
{
	height:100%;
	float: right;
}

ul.nav li a
{
    display: inline-block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}

ul.nav li a:hover
{
    border-bottom: solid #ff0000;
}