JSFiddle - React, Tailwind, and code Playground

by CSS_Apprentice

HTML

<body>
		<div class="container">
			<div id="left" class="bgpink">
			</div>
			<div id="right" class="bggreen">
				<ul id="nav">
					<li><a href="#">a</a></li>
					<li><a href="#">b</a></li>			
					<li><a href="#">c</a></li>
					<li><a href="#">d</a></li>
				</ul>
			</div>
		</div>
	</body>

CSS

* {
	margin: 0;
	padding: 0;
}

#nav {
   	width: 100%;
	text-align: justify;
	margin: 0;
	padding: 2% 0 0 0 ;
	background-color: yellow;
}

#nav:after {
    content: '';
    display: inline-block;
    width: 100%;
}

#nav li {
    display: inline-block;
    
}

#left {
	float: left;
}

#right {
	float: right;
}

#left, #right {
	height: 100%;
	width: 50%;
	min-height: 400px;
}

.bgpink {
	background-color: pink;
}

.bggreen {
	background-color: green;
}