JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper"><table>
    <tr><td class="first">A</td><td class="second">AA</td><td class="rest">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mollis est vitae nunc adipiscing, vel tincidunt nulla gravida</td><td class="rest">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mollis est vitae nunc adipiscing, vel tincidunt nulla gravida</td></tr>
    <tr><td class="first">B</td><td class="second">BB</td><td class="rest">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mollis est vitae nunc adipiscing, vel tincidunt nulla gravida</td><td class="rest">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mollis est vitae nunc adipiscing, vel tincidunt nulla gravida</td></tr>
    <tr><td class="first">C</td><td class="second">CC</td><td class="rest">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mollis est vitae nunc adipiscing, vel tincidunt nulla gravida</td><td class="rest">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mollis est vitae nunc adipiscing, vel tincidunt nulla gravida</td></tr>
    <tr><td class="first">D</td><td class="second">DD</td><td class="rest">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mollis est vitae nunc adipiscing, vel tincidunt nulla gravida</td><td class="rest">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mollis est vitae nunc adipiscing, vel tincidunt nulla gravida</td></tr>
</table></div>

CSS

table {
    border-collapse:collapse;
}
table, td, th {
    border:1px solid black;
}
td {
    white-space:nowrap;
}
.first {
    position:absolute;
    width:40px;
    left:0;
    top:auto;
    background: red;
}

.second {
    position:absolute;
    width:40px;
    left:42px;
    top:auto;
    background: green;
}
.wrapper {
    width: 500px;
    overflow-x:scroll;  
    margin-left:80px;
}