JSFiddle - React, Tailwind, and code Playground

by Chetan Krishna

HTML

<div class="container" style="background:#000; color:#fff; text-align:center">
		------page content max width----
	</div>
	<div class="page-cols">
		<div class="container ">
			<div class="cols-wrap">
				<section class="main-col">
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ipsum sapien, tincidunt ac augue sodales, consequat sodales elit. Nunc pharetra eget velit sed pharetra. Nulla et vehicula dui. Nullam ut eleifend diam. Aliquam purus nisl, molestie sed nisi nec, pellentesque luctus lorem. Donec sodales felis convallis nunc maximus tempus. Sed pellentesque scelerisque scelerisque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
				</section>
				<aside class="aside-col">
					<div class="pack">
						Sed luctus nisl ut ipsum scelerisque semper. Nullam euismod eros vitae odio viverra tristique. Nam pulvinar massa at diam congue, vitae fringilla neque varius. In molestie quis neque luctus facilisis. Nunc nec diam volutpat, tristique eros in, dictum mi. Nunc rhoncus egestas odio, a placerat odio venenatis ut. Cras scelerisque ligula ut ornare posuere.

						Vestibulum sit amet mi ut odio condimentum dictum vel a metus. Morbi ultrices enim ut accumsan lacinia. Praesent augue purus, bibendum in odio in, pharetra consectetur mi. Vivamus ac arcu dignissim, placerat ipsum eu, tempor magna. Integer nec ipsum dui. Quisque at diam est. Aliquam ut placerat ligula, eu venenatis turpis. Sed nec eros vel ante ornare eleifend. Suspendisse aliquam nulla consectetur tellus molestie efficitur.
					</div>
				</aside>
			</div>
		</div>
	</div>

CSS

body{
			font-family: arial;
			font-size: 14px;
			color: #333;
			line-height: 1.5;
			overflow-y: scroll;
			margin:0;
			padding: 0;
		}
		*, *::before, *::after {
			box-sizing: border-box;
		}
		.container:after,
		.cols-wrap:after,
		.page-cols:after{ 
			clear: both; 
			content: ""; 
			display:table; 
		}

		.container{
			margin: 0 auto;
			max-width: 1200px;
			min-width: 300px;
			padding:0 10px;
			position: relative;
		}

		.page-cols{
			background-color: #999;
		}
		.cols-wrap{
			width: 100%;
			position: relative;
			background-color: #ccc; /*this can be #fff too to match body bg*/
			box-shadow: 10px 10px 10px -10px #000;
			right: 320px;
		}
		.cols-wrap .main-col{
			float: left;
			left: 320px;
			position: relative;
			width: 100%;
			padding-right: 340px;
		}
		.cols-wrap .aside-col{
			float: right;
			position: relative;
			width: 320px;
			margin-right: -320px;
			padding-left: 20px
		}