JSFiddle - React, Tailwind, and code Playground
by Don Johnson
HTML
<div id="main">
<div id="primary" class="home">
<div id="content" role="main">
<div id="main-content" class="container_12">
<div id="info" class="grid_4">
<div id="networking">
<h2>RSViP - Business Networking</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In rhoncus lobortis orci, sed vestibulum leo dapibus et. Fusce in dolor velit, sit amet vehicula est. Integer elit sapien.</p> <a href="">Apply for Business Networking</a>
<a href="">Free Trial</a>
</div>
<div id="card">
<h2>RSViP - Card</h2>
</div>
</div>
<div id="twitter" class="grid_4">
<h2>News / Twitter Feed</h2>
<ul>
<li>
<p>Details of our next Business Network Social & 5th Birthday have been finalised- Invitations going out tomorrow to members <a href="http://www.twitter.com/HartsNottingham" target="_blank">@HartsNottingham</a>
</p>
<p id="date">3rd Apr 04:57 PM</p>
</li>
<li>
<p>Details of our next Business Network Social & 5th Birthday have been finalised- Invitations going out tomorrow to members <a href="http://www.twitter.com/HartsNottingham" target="_blank">@HartsNottingham</a>
</p>
<p id="date">3rd Apr 04:08 PM</p>
</li>
<li>
<p>Details of our next Business Network Social & 5th Birthday have been finalised- Invitations going out tomorrow to members <a href="http://www.twitter.com/HartsNottingham" target="_blank">@HartsNottingham</a>
</p>
...
CSS
* {
margin:0;
padding:0;
}
.home #main-content {
margin-top: 23px;
margin-bottom: 23px;
height: 100%;
}
/*Col1 - Info*/
.home #info {
width: 270px;
padding-right: 30px;
background: url('images/divider.png') repeat-y top right;
height: 100%;
background: purple;
}
/*Col2 - Twitter*/
.home #twitter {
padding-left: 10px;
width: 290px;
background: yellow;
}
.home #twitter ul {
list-style: none;
margin: 0; padding: 0;
}
/* Col3 */
.home #col3 {
background: green;
}
/* 960 */
body{min-width:960px}.container_12{margin-left:auto;margin-right:auto;width:960px}.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12{display:inline;float:left;margin-left:10px;margin-right:10px}.push_1,.pull_1,.push_2,.pull_2,.push_3,.pull_3,.push_4,.pull_4,.push_5,.pull_5,.push_6,.pull_6,.push_7,.pull_7,.push_8,.pull_8,.push_9,.pull_9,.push_10,.pull_10,.push_11,.pull_11{position:relative}.alpha{margin-left:0}.omega{margin-right:0}.container_12 .grid_1{width:60px}.container_12 .grid_2{width:140px}.container_12 .grid_3{width:220px}.container_12 .grid_4{width:300px}.container_12 .grid_5{width:380px}.container_12 .grid_6{width:460px}.container_12 .grid_7{width:540px}.container_12 .grid_8{width:620px}.container_12 .grid_9{width:700px}.container_12 .grid_10{width:780px}.container_12 .grid_11{width:860px}.container_12 .grid_12{width:940px}.container_12 .prefix_1{padding-left:80px}.container_12 .prefix_2{padding-left:160px}.container_12 .prefix_3{padding-left:240px}.container_12 .prefix_4{padding-left:320px}.container_12 .prefix_5{padding-left:400px}.container_12 .prefix_6{padding-left:480px}.container_12 .prefix_7{padding-left:560px}.container_12 .prefix_8{padding-left:640px}.container_12 .prefix_9{padding-left:720px}.container_12 .prefix_10{padding-left:800px}.container_12 .prefix_11{padding-left:880px}.container_12 .suffix_1{padding-right:80px}.container_12 .suffix_2{padding-right:160px}.container_12...
JavaScript
$('#main-content > div').height($('#main-content').height());