JSFiddle - React, Tailwind, and code Playground

HTML

<!-- 单列定宽单列自适应结构 -->
<div id="header">头部信息</div>
<div id="container">
	<div class="mainBox">
		<p>主要内容区域</p>
		<p>已经不再只是一行文字了</p>
		<p>要放很多很多东西到这个区域中来</p>
		<p>不断的重复啊重复着……</p>
		<p>不断的重复啊重复着……</p>
		<p>不断的重复啊重复着……</p>
		<p>不断的重复啊重复着……</p>
		<p>不断的重复啊重复着……</p>
		<p>不断的重复啊重复着……</p>
		<p>不断的重复啊重复着……</p>
		<p>不断的重复啊重复着……</p>
		<p>不断的重复啊重复着……</p>
	</div>
	<div class="sideBox">侧边栏</div>
</div>
<div id="footer">底部信息</div>

CSS

* {
	margin:0;
	padding:0;
} /* 设置页面中所有元素的内外补丁为0，便于更便捷的页面布局 */
#header, #footer {
	height:30px;
	background-color:#E8E8E8;
} /* 设置头部信息以及底部信息的高度为30px，并添加浅灰色背景色 */
#container {
	position:relative; /* 添加相对定位属性为其子元素的绝对定位属性有参照物 */
	margin:10px 0;
} /* 设置页面内容区域设置上下外补丁为10px */
.mainBox {
	width:auto; /* 将mainBox的宽度修改为auto默认值 */
	margin-right:300px; /* 利用外补丁属性为sideBox留有200px的空白 */
	color:#FF0000;
	background-color:#333333;
} /* 设置主要内容区域的宽度为auto默认值，背景色以及文本颜色，并居左显示 */
.sideBox {
	position:absolute; /* 设置sideBox为绝对定位，相对于其父元素#container定位 */
	top:0px; /* 相对其父元素的顶部0px绝对定位 */
	right:0px; /* 相对其父元素的右边0px绝对定位 */
	width:200px; /* 将sideBox的宽度修改为200px */
	margin-left:-200px; /* 添加负边距使sideBox向左浮动缩进 */
	color:#FFFFFF;
	background-color:#999999;
} /* 设置侧边栏的宽度为200px，背景色以及文本颜色，并居右显示 */