JSFiddle - React, Tailwind, and code Playground

by jcpmcdonald

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap-theme.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
<div id="screen" style="width: 100%; height: 100%; background-color:red;">
    <div id="toolbar">
        Tools, tools,<br/>
        and more tools. Bacon ipsum dolor sit amet ball tip rump filet mignon tenderloin tongue meatball. Ground round pork tri-tip beef, tenderloin drumstick cow biltong shankle pork chop spare ribs frankfurter. Beef leberkas swine short loin tri-tip pork chop. T-bone drumstick hamburger capicola salami biltong.
    </div>
    <div id="somethingImportant">
        Something important here
    </div>
    <div id="codeCell">
        <pre style="width: 100%; height: 100%; overflow: auto;">
Bacon ipsum dolor sit amet ball tip rump filet mignon tenderloin tongue meatball. Ground round pork tri-tip beef, tenderloin drumstick cow biltong shankle pork chop spare ribs frankfurter. Beef leberkas swine short loin tri-tip pork chop. T-bone drumstick hamburger capicola salami biltong.
            
Filet mignon beef pancetta pastrami andouille, pork chop kielbasa meatloaf flank frankfurter kevin chicken drumstick. Venison frankfurter shoulder, short loin short ribs sausage boudin kevin doner prosciutto shankle filet mignon beef tenderloin. T-bone biltong shankle doner strip steak. Prosciutto pancetta kielbasa shank jowl beef ribeye shoulder pastrami venison. Ham tenderloin tri-tip, hamburger shankle shank jowl leberkas boudin spare ribs. Frankfurter andouille tenderloin boudin tongue pork belly short loin leberkas capicola jowl shoulder tail.
            
            Filet mignon hamburger pig boudin pork chop bresaola. Jerky leberkas pancetta capicola beef ribs. Beef andouille...

CSS

html, body {
    height: 100%;
}
body {
    background-color: #fff;
    font-family: sans-serif;
    margin: 0;
    border: 1px solid;
}

#somethingImportant
{
    float: left;
    width: 70%;
    height: 100%;
    background-color: grey;
}

#codeCell
{
    float: left;
    width: 30%;
    height: 100%; /* ?? right? */
    padding-left: 2px;
}

div
{
    margin: 0;
    padding: 0;
}

JavaScript

$(document).ready(function(){
    fitToScreen();
    window.addEventListener('resize', function () {fitToScreen();}, false);

    function fitToScreen()
    {
        $("#somethingImportant").height($("#screen").height() - $("#toolbar").height());
        $("#codeCell").height($("#screen").height() - $("#toolbar").height());
    }
});