JSFiddle - React, Tailwind, and code Playground

by genelocklin

HTML

<div class="wrap">
    

        
        <section>
            <h3>Bridgekeeper</h3>
            <p>Burn her! Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods. You don't frighten us, English pig-dogs! Go and boil your bottoms, sons of a silly person! I blow my nose at you, so-called Ah-thoor Keeng, you and all your silly English K-n-n-n-n-n-n-n-niggits! He hasn't got shit all over him.</p>
            <h4>What a strange person</h4>
            <p>No, no, no! Yes, yes. A bit. But she's got a wart. Now, look here, my good man. Well, she turned me into a newt. And the hat. She's a witch! Camelot! Be quiet!</p>
            <p>What a strange person. Oh! Come and see the violence inherent in the system! Help, help, I'm being repressed! &hellip;Are you suggesting that coconuts migrate? Well, I got better. No, no, no! Yes, yes. A bit. But she's got a wart. Why?</p>
            <p>We want a shrubbery!! Shut up! Will you shut up?! Listen. Strange women lying in ponds distributing swords is no basis for a system of government. Supreme executive power derives from a mandate from the masses, not from some farcical aquatic ceremony. I am your king.</p>
            <p>You don't frighten us, English pig-dogs! Go and boil your bottoms, sons of a silly person! I blow my nose at you, so-called Ah-thoor Keeng, you and all your silly English K-n-n-n-n-n-n-n-niggits! Bring her forward! Now, look here, my good man.</p>
        <p>Shut up! Did you dress her up like this? Shut up!</p>
        </section><!-- /section -->
    
        <aside>
            <h3>Blue. No, yel&hellip;</h3>
            <p>Now, look here, my good man. Listen. Strange women lying in ponds distributing swords is no basis for a system of government. Supreme executive power derives from a mandate from the masses, not from some farcical aquatic ceremony. Shh! Knights, I bid you welcome to your new home. Let us ride to Camelot!</p>
            <h4>Makes Ben Hur look like...

CSS

/* unrelated */
* { 
    margin: 0; 
    padding: 0; 
    -webkit-box-sizing:border-box;
       -moz-box-sizing:border-box;
        -ms-box-sizing:border-box;
         -o-box-sizing:border-box;
            box-sizing:border-box;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section { display: block; }

body { 
    font: 87.5%/1.5em sans-serif;
    color: #fff;
    background: #b2b0a6;
    text-shadow: 0 -1px 0 rgba(0,0,0,.25);
}

p { 
    margin-bottom: 1.5em;
}

p:last-child { 
    margin-bottom: 0;
}

h3 {
    font-size: 1.5em;
    line-height: 1em;
    margin-bottom: .5em;
    padding-bottom: .5em;
    box-shadow: 0 1px 0 white;
}

h4 {
    font-size: 1.25em;
    line-height: 1.2em;
    margin-bottom: .6em;
    padding-bottom: .6em;
    box-shadow: 0 1px 0 white;
}

body {
    width: 90%;
    margin: 0 auto;
}

/* split code */
.wrap { 
    margin: 3em auto;
    max-width: 60em;
    width: 100%;
    overflow: hidden;
    outline: 1px solid white;
}

section { 
    float: left;
    width: 60%;
    padding: 1.5em 2.5%;
    position: relative;
    background: #ee381d;
}

section::after { 
    content: "";
    position: absolute;
    right: -999em;
    top: 0;
    background: #1d80ee;
    display: block;
    z-index: -10;
    /* may as well make these huge */
    height: 999em; 
    width: 999em;
}

aside { 
    float: right;
    width: 40%;
    padding: 1.5em 2.5%;
}



@media all and (max-width: 40em) { 
    
    section { 
        width: 100%;
    }
    
    section::after { 
        /* there is probably a better way of doing this */
        display: none;
        visibility: hidden;
    }
    
    aside { 
        float: left;
        width: 100%;
        background: #1d80ee;
    }


}