JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<div class="wrap">
		<div class="menu clearfix">
			<ul>
				<li>menu1</li>
				<li>menu2</li>
				<li>menu3</li>
			</ul>
		</div>
		<div class="content clearfix">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt labore officia minima quia at voluptatibus ullam quo consequatur impedit officiis quibusdam iste aspernatur dignissimos est ea alias dolorum, voluptas eaque. Rem expedita, reiciendis eligendi nesciunt repudiandae beatae quae nam atque repellendus ipsa impedit praesentium excepturi, cum mollitia, corporis odio molestiae?</p>
		</div>
	</div>
</body>

CSS

.wrap{
	max-width: 900px;
	/*max-width: 90%; 設％瀏覽器縮小時左右區塊就會變上下排列，除非設100%*/
	margin: 0 auto;
}
.clearfix:after{
	content: '';
	display: table;
	clear:both;
}
.menu{
	width: 200px;/*如果用％，隨瀏覽器寬度變化，menu會隨父元素比例換算寬度，所以設px較適合*/
	float:left;
	background: #bbded6;
}
.menu li{
	margin:5px 0 5px 5px;
}
.content{
	width:60%;
	float: left;
	background: #d9d9f3;
	padding: 1%;
	box-sizing: border-box;
}/*如果使用清除浮動.content就必須設寬度，要算好寬度，否則無法自適應*/