JSFiddle - React, Tailwind, and code Playground

by stevelove

HTML

<div class="container split">
    <div class="panel">
        <h2>Bacon Ipsum</h2>
        <p>Meatball tongue andouille boudin, drumstick strip steak rump beef ribs ground round pig biltong cow corned beef. Pastrami chuck jowl t-bone, swine shoulder meatball ham hock sirloin pork belly. Ham hock jerky venison, shank bresaola brisket swine pancetta drumstick jowl flank beef tenderloin. Venison jerky jowl fatback, biltong hamburger ribeye pork belly. Chuck pork chop short ribs, meatball hamburger strip steak andouille jerky cow t-bone turkey ham bresaola. Bacon tongue ham, hamburger boudin pork loin meatloaf turkey salami pork chop shoulder beef ribs ball tip tri-tip tenderloin. Ground round tongue corned beef ham hock, jerky rump cow shank.</p>
    </div>
    <div class="panel">
        <h2>Hipster Ipsum</h2>
        <p>Tattooed banksy skateboard bicycle rights, marfa freegan chambray put a bird on it butcher lomo seitan messenger bag leggings. Synth high life wayfarers, cred gluten-free food truck beard photo booth raw denim fanny pack keffiyeh echo park art party helvetica. Master cleanse squid helvetica four loko lo-fi trust fund, cosby sweater iphone mustache synth brooklyn. Marfa leggings stumptown synth four loko. Fixie DIY PBR cliche, before they sold out lo-fi letterpress beard irony whatever fanny pack banksy tattooed. Gentrify marfa raw denim organic helvetica. Marfa yr cred craft beer iphone photo booth.</p>
    </div>
</div>

CSS

h2 {
    font-weight:bold;
    margin:10px 0;
}

.container {
    background:#eee;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    width: 400px;
}

.panel {
    -webkit-box-flex:0;
    background:#ddd;
    border:1px solid #ccc;
    height:100px;
    overflow:auto;
    padding:10px;
    resize:vertical;
}

.panel:first-child {
    border-bottom:5px dotted #aaa;
}