JSFiddle - React, Tailwind, and code Playground

by davidpauljunior

HTML

<div id="wrapper">
    <div id="col1">Content here Content Here Content Here Content Here Content Here</div>
    <div id="col2">Some Content</div>
</div>
<footer>
    <p>Footer Content</p>
</footer>

CSS

/* Apply a natural box layout model to all elements - taken from Paul Irish recommendation */
*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
body, html {
    height: 100%;
}
body {
    margin: 0;
    min-height: 100%;
    position: relative;
}
#wrapper {
    width: 70%;
    height: 100%;
    margin: 0 auto;
    padding: 0 0 50px; /* 50px is footer height */
}
#col1 {
    width: 70%;
    height: 100%;
    float: left;
    margin: 0;
    background: blue;
}
#col2 {
    width: 30%;
    height:100%;
    float: right;
    margin: 0;
    background: red;
}
footer {
    background: yellow;
    position:absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
}

footer p {
    margin: 0;
}