JSFiddle - React, Tailwind, and code Playground

by odiseo

HTML

<div id="Wrapper">
    <div id="first">Left side content</div>
    <div id="second">
        <table>
            <tr>
                <td class="headcol">1</td>
                <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
                <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
            </tr>
            <tr>
                <td class="headcol">2</td>
                <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
                <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
            </tr>
            <tr>
                <td class="headcol">3</td>
                <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
                <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
            </tr>
            <tr>
                <td class="headcol">4</td>
                <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
                <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
            </tr>
            <tr>
                <td class="headcol">5</td>
                <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
                <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
            </tr>
            <tr>
                <td class="headcol">6</td>
                <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
                <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
            </tr>
            <tr>
                <td class="headcol">7</td>
                <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
                <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
            </tr>
            <tr>
                <td class="headcol">8</td>
                <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
                <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
            </tr>
            <tr>
                <td class="headcol">9</td>
                <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
                <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
            </tr>
        </table>
   ...

CSS

body {
    font:16px Calibri;
}
#wrapper {
    width: 500px;
    border: 1px solid black;
    overflow: hidden;
    /* will contain if #first is longer than #second */
}
#first {
    width: 100px;
    float:left;
    /* add this */
    border: 1px solid red;
}
#second {
    border: 1px solid green;
    overflow: hidden;
    /* if you don't want #second to wrap below #first */
    width: 400px;
    overflow-x:scroll;
    margin-left:5em;
    overflow-y:visible;
    padding-bottom:1px;
}
table {
    border-collapse:separate;
    border-top: 3px solid grey;
}
td {
    margin:0;
    border:3px solid grey;
    border-top-width:0px;
    white-space:nowrap;
}
.headcol {
    position:absolute;
    width:5em;
    left:0;
    top:auto;
    border-right: 0px none black;
    border-top-width:3px;
    /*only relevant for first row*/
    margin-top:-3px;
    /*compensate for top border*/
}
.headcol:before {
    content:'Row ';
}
.long {
    background:yellow;
    letter-spacing:1em;
}