JSFiddle - React, Tailwind, and code Playground

by thundercracker

HTML

<div class="wrapper">
<div class="cont">
    <table>
    <tr>
        <th>Header 1</th>
    </tr><tr>
        <td>Content 1</td>
    </tr><tr>
        <td>Content 2</td>
    </tr><tr>
        <td>Content 3</td>
    </tr><tr>
        <td>Content 4</td>
    </tr><tr>
        <td>Content 5</td>
    </tr>
</table>
    <div class="position">
        <div class="displacer">&nbsp;</div>
        <div class="scroll">
            <h2>header 2</h2>
            <p>
               This is your scroll column; rest of this is nothing about some nothing
                that really concerns nothing at all and is merely there to affect
                nothing of any real meaning, except possibly some nothing.
            </p>
        </div>
    </div>
</div>
</div>

CSS

body {width: 450px; margin: 10px 50px; background: #f0f0f0}
table {width: 100px; border: 1px #000 solid; float: left}
td, th {background: #ddd; border-bottom: 1px #000 solid; padding: 4px}
h2{border-bottom: 1px #000 solid; border-top: 1px #000 solid; background: #ade; padding: 4px; position: absolute; top: 0; width: 100%;}
div.cont {background: #eda; position: relative; overflow: hidden; width: 100%; border-right: 1px #000 solid}
div.position {height: 100%; position: absolute; left: 100px; padding-right: 100px; width: 100%}
div.scroll {overflow-x: auto; height: 100%;}
div.displacer {width: 100px; height: 100%; float: right;}
p {width: 500px; margin: 35px 4px 10px}

JavaScript

/* Notes about this layout
* Recommended that the following values remain the same:
*    width of the table
*    width of the discplacer div
*    left position of the position div
*/