JSFiddle - React, Tailwind, and code Playground

by GolezTrol

HTML

<header id="header" role="banner">
	<div id="header-inner">
		<div id="top-left">
			<a href="#" title="something" rel="home">Site Title</a>
		</div>

		<nav id="top-right">
			<div class="menu">
                <ul>
                    <li class="current_page_item"><a href="#">Home</a></li>
                    <li class="page_item page-item-2"><a href="#">Home2</a></li>
                </ul>
            </div>
		</nav>
	</div>
</header>

CSS

#header {width:100%; float:left; border: 1px solid blue;}
#header-inner {width:600px; margin:0 auto; border: 1px solid red;}
#top-left {float:left;; border: 1px solid green;}
#top-right {float:right; ; border: 1px solid orange;}
#header-inner::after{
    display: block;
    content: "";
    float: none;
    clear: both;
}