JSFiddle - React, Tailwind, and code Playground

by chris_tsongas

HTML

<div style="background: #f1f2ea;">
  <div id="container">
    <div id="content">
        <strong>Column 1 - content Column 1 - content Column 1 - content Column 1 - content Column 1 - content Column 1 - content Column 1 - content</strong>
    </div>
  </div>
  <div id="sidebar">
    <strong>Column 2 - sidebar Column 2 - sidebar Column 2 - sidebar Column 2 - sidebar Column 2 - sidebar Column 2 - sidebar Column 2 - sidebar Column 2 - sidebar Column 2 - sidebar Column 2 - sidebar Column 2 - sidebar Column 2 - sidebar</strong>
  </div>
<div style="clear:both"></div>

CSS

#container {
    margin-right: -300px;
    float:left;
    width:100%;
}
#content {
    background-color: #ff0000;
    margin-right: 320px; /* 20px added for center margin */
}
#sidebar {
    background-color: #00ff00;
    width:300px;
    float:left
}
@media (max-width: 480px) {
    #container {
        margin-right:0px;
        margin-bottom:20px;
    }
    #content {
        margin-right:0px;
        width:100%;
    }
    #sidebar {
        clear:left;
    }
}