JSFiddle - React, Tailwind, and code Playground

by NerfAnarchist

HTML

<div id="left_column">
    <div id="toolbar"></div>
    <div id="raw_code">
        <div class="inner">sdjfasd;fjlk  ;lasdjf;lasjd l;fas;ld fj;alsdj;flja ;sldjf;lasjd;lfja ;ljas;ld jf;aldskj f;lajsd ;fljasd;lfja;ls djf;lasjd f;lakjsd; lfja;dslkjf ;ajsdf;l jas;dlfj ;alsdfj ;alsdjf;ladsjkf; kljas;dklj a;sldkj ;alsdj ;alksjd ;ajd;lajds;lfj;alds kjf;lakj lk jdlsaj lkasdj flajdsl jasjkdfjla ksdfjl adsjklfskjlad ljkdf sjklaf kljf dalkjdfajlkdfajlfa djlkf dkljfd  jklf jlkf ajklf jklf jkl jasld jflasdjf lasdjf laskdjfl asjdflaj sldjf lajsdl fja</div></div>
</div>
<div id="right_column">
    <div id="parsed_code"></div>
    <div id="raw_html"></div>
    <div id="parsed_html"></div>
</div>

CSS

div {
    outline: 1px solid #000000;
}

#toolbar {
    height: 10%;
    width: 100%;
}

#raw_code {
    height: 90%;
    width: 100%;
}

#parsed_code {
    height: 33%;
    width: 100%;
}

#raw_html {
    height: 33%;
    width: 100%;
}

#parsed_html {
    height: 34%;
    width: 100%;
}

#left_column {
    height: 100%;
    width: 50%;
    float:left;
}

#right_column {
    height: 100%;
    width: 50%;
    float:right;
}

.inner {
    padding: 6px;
}

html, body {
    height: 100%;
}

JavaScript

// layout testing