JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper-main">
		<div class="container clear-fix">
			<div class="side-bar">
				<div class="block1"></div>
				<div class="banners"></div>
			</div>
			<div class="content"></div>
		</div>
	</div>
	<div class="footer"></div>

CSS

body,html{
	margin:0;
	padding:0;
	height:100%;
	width:100%;
}

.wrapper-main{
	width:100%;
	min-height: 100%;
	padding-bottom:151px;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.footer{
	margin:-101px auto 0;
	height:101px;
	background: #f2f2f2;
}

.container{
	width:1260px;
	margin:0 auto;
}

.content{
	width:960px;
	height:500px;
	background:#e0dbdb;
}

.side-bar{
	float:right;
	width:300px;
	background:#d5cdcd;
	min-height:100%;
}


.clear-fix:before,
.clear-fix:after{
	display:block;
	height:0;
	content:'';
}
.clear-fix:after{
    clear:both;
}


.block1{ 
	background:red;
	width:300px;
	height:200px;
}

.banners{
	background:green;
	width:300px;
	height:100%;
}