JSFiddle - React, Tailwind, and code Playground

HTML

<div id="scrolledGridView">
        <div><!-- This div is added by GridView control FWR-->
    <table cellspacing="0" rules="all" border="1" id="GridView1" style="border-collapse:collapse;">
        <tr>
            <th class="pinned col1" scope="col">Col 1</th><th class="pinned col2" scope="col">Column 2</th><th class="scrolled" scope="col">Column 3</th><th class="scrolled" scope="col">Column 4</th>
        </tr><tr>
            <td class="pinned col1">1</td><td class="pinned col2">Thing 1</td><td class="scrolled">Thing 1 Description XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</td><td class="scrolled">100</td>
        </tr><tr>
            <td class="pinned col1">2</td><td class="pinned col2">Thing 2</td><td class="scrolled">Thing 2 Description XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</td><td class="scrolled">200</td>
        </tr><tr>
            <td class="pinned col1">3</td><td class="pinned col2">Thing 3</td><td class="scrolled">Thing 3 Description XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</td><td class="scrolled">300</td>
        </tr><tr>
            <td class="pinned col1">4</td><td class="pinned col2">Thing 4</td><td class="scrolled">Thing 4 Description XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</td><td class="scrolled">400</td>
        </tr><tr>
            <td class="pinned col1">5</td><td class="pinned col2">Thing 5</td><td class="scrolled">Thing 5 Description XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</td><td class="scrolled">500</td>
        </tr>
    </table>
</div>
    </div>

CSS

#scrolledGridView
        {
            overflow-x: scroll; 
            text-align: left;
            width: 400px; /* i.e. too small for all the columns */
        }
 
        .pinned
        {
            position: fixed; /* i.e. not scrolled */
            background-color: White; /* prevent the scrolled columns showing through */
            z-index: 100; /* keep the pinned on top of the scrollables */
        }
        .scrolled
        {
            position: relative;
            left: 150px; /* i.e. col1 Width + col2 width */
            overflow: hidden;
            white-space: nowrap;
            min-width: 500px; /* set your real column widths here */
        }
        .col1
        {
            left: 0px;
            width: 50px;
        }
        .col2
        {
            left: 50px; /* i.e. col1 Width */
            width: 100px;
        }