JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
	
	<div id="main" class="cf">
		<div id="content">
		This is my cool content and I'm proud of it.
		</div><!-- #content -->
		<div id="sidebar">
		Test test test
		Test test test
		Test test test
		Test test test
		Test test test
		</div>
	</div><!-- #main -->
	
</div><!-- #wrapper -->

CSS

@charset "utf-8";
/* CSS Document */

html, body{
	margin:0; 
	padding:0;
	font-family: Arial, Helvetica, sans-serif;
	background-color: #f2f2f2;
	/*background-image: url(images/background.jpg);
	background-repeat:repeat-x;*/
}

a {
	color: #000000;
	font-weight: bold;
	text-decoration: none;
}

#wrapper {
	width: 980px;
	border: 1px solid #000000;
	margin: 0 auto;
}

#main {
	width: 940px;
	padding: 20px;
	background-color: #ffffff;
}

#content {
	float: left;
	width: 600px;
	border: 1px solid #000000;
}

#sidebar {
	float: left;
	width: 300px;
	border: 1px solid #000000;
	margin-left: 10px;
}

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}