JSFiddle - React, Tailwind, and code Playground

by genelocklin

HTML

<div>
    <aside>
<p>Wow, you got that off the Internet? In my day, the Internet was only used to download pornography. Is today's hectic lifestyle making you tense and impatient? Please, Don-Bot&hellip; look into your hard drive, and open your mercy file!</p>
<p>Bender, this is Fry's decision&hellip; and he made it wrong. So it's time for us to interfere in his life. Tell her she looks thin. Yeah, and if you were the pope they'd be all, "Straighten your pope hat." And "Put on your good vestments." Come, Comrade Bender! We must take to the streets! Is today's hectic lifestyle making you tense and impatient? Now Fry, it's been a few years since medical school, so remind me. Disemboweling in your species: fatal or non-fatal?</p>
<p>Why yes! Thanks for noticing. WINDMILLS DO NOT WORK THAT WAY! GOOD NIGHT! I had more, but you go ahead. Yep, I remember. They came in last at the Olympics, then retired to promote alcoholic beverages! Kids don't turn rotten just from watching TV. They're like sex, except I'm having them!</p>
<p>I daresay that Fry has discovered the smelliest object in the known universe! So, how 'bout them Knicks? Oh, but you can. But you may have to metaphorically make a deal with the devil.  And by "devil", I mean Robot Devil.  And by "metaphorically", I mean get your coat. But I know you in the future. I cleaned your poop.</p>
<p>No, she'll probably make me do it. OK, if everyone's finished being stupid. You, a bobsleder!? That I'd like to see!</p>    
    </aside>
    <div>
        <article>
            <div></div>
            <div></div>
            <div></div>
        <article>
    </div>
</div>

CSS

* { margin: 0; padding: 0; }

body { 
    max-width: 60px;
    width: 90%;
    margin: 0 auto;}

body + div { 
    width: 98%;
    margin: 1% auto; }

aside { 
    background: #f1f2f3;
    width: 20em;
    height: 100%;
    padding: 1em;
    position: fixed;
}

div:nth-of-type(2) { 
    float: right;
    max-width: 38em;
}
    

article div { 
    height: 3em;
    width: 31.333%;
    display: inline;
    float: left;
    position: relative;
    margin-left: 1%;
    margin-right: 1%;
    background: red;
}