JSFiddle - React, Tailwind, and code Playground

by stvnmntjy

HTML

<div id="alpha">
    <div id="time-ranges">
<a id="two-wks" class="range" href="#">2 weeks</a>
 <a id="four-wks" class="range" href="#">4 weeks</a>
 <a id="eight-wks" class="range" href="#">8 weeks</a>

    </div>
    <div id="bravo">
        <div id="labels">
            <div id="temp-label">
                <p class="label"><strong>Temperature</strong>

                </p>
            </div>
            <div id="labs-label">
                <p class="label"><strong>Labs</strong>

                </p>
                <div class="lab-result">
                    <p>Weight</p>
                </div>
                <div class="lab-result stripe">
                    <p>BUN</p>
                </div>
                <div class="lab-result">
                    <p>Cardiac Output</p>
                </div>
                <div class="lab-result stripe">
                    <p>WBC disp</p>
                </div>
                <div class="lab-result">
                    <p>Pain level on scale of 0 - 10 (2)</p>
                </div>
            </div>
            <div id="orders-label">
                <p class="label"><strong>Antimicrobials</strong>
                </p>
            </div>
        </div>
        <div id="data">
            <div id="data-cont">
                <div id="graph" class="data-sect">
                    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/02/ScientificGraphSpeedVsTime.svg/300px-ScientificGraphSpeedVsTime.svg.png"></img>
                </div>
                <div class="data-sect">
                    <div class="lab-result"></div>
                    <div class="lab-result stripe"></div>
                    <div class="lab-result"></div>
                    <div class="lab-result stripe"></div>
                    <div class="lab-result"></div>
                </div>
                <div class="data-sect">
                    <img...

CSS

/* this is just for here: browser defaults overrides */
html {
    overflow: hidden;
}
body, p {
    margin: 0;
}
#tabs, #wrapper, #result {
    overflow: hidden;
}
/* horizontal overflow auto because custom content is inserted above the graph */
 body {
    overflow-x: hidden;
    overflow-y: auto;
}
/* alpha for all company (non-custom) code */
 #alpha {
    overflow: hidden;
}
/* this container has vertical overflow */
 #bravo {
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
}
/* time control div */
 #time-ranges {
    height: 25px;
    text-align: center;
}
/* actual time range anchors */
.range {
    margin-left: 3px;
    margin-right: 3px;
}
/* labels master div (the left side) */
#labels {
    width: 150px;
}
/* data master div (the right side) */
#data {
    margin-left: 150px; /* = #labels.width */
    overflow-x: auto;
    position: absolute;
    top: 0;
}
/* graph div height, used in #labels and #data */
#graph {
    height: 225px;
}
/* label for each section inside #labels */
.label {
    height: 20px;
    line-height: 20px;
    margin: 0;
}
/* temp label section */
#temp-label {
    height: 245px; /* #graph.height + .label.height */
}
/* each data section is top padded */
.data-sect {
    padding-top: 20px; /* = .label.height */
}
/* used in #labels and #data */
.lab-result {
    height: 50px; /* arbitrary */
}
.stripe {
    background-color: lightgray;
}

JavaScript

// set all container dimensions
$('html, body, #alpha').height($(window).height());
$('html, body, #alpha, #bravo').width($(window).width());
$('#bravo').height($(window).height() - $('#time-ranges').height());
$('#data').width($('#bravo').width() - $('#labels').width());

// now dynamically set two weeks, four weeks, eight weeks widths
// based on screen calculations above. two weeks = 100%, four = 200%,
// eight = 400%.
var twoWt, fourWt, eightWt;
var setGrowth = function () {
    twoWt = $('#data').width();
    fourWt = 2 * twoWt;
    eightWt = 2 * fourWt;
};
setGrowth();

// click handlers that set the #data-cont width based on above-calculations
$('#two-wks').click(function () {
    $('#data-cont').width(twoWt);
});
$('#four-wks').click(function () {
    $('#data-cont').width(fourWt);
});
$('#eight-wks').click(function () {
    $('#data-cont').width(eightWt);
});