JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
<div class="fixed">
     <table>
        <thead>
            <tr>
                <td>
                    Title #1
                </td>
                <td class="second">
                    Title #2
                </td>
            </tr>
        </thead>
    </table>
</div>
<div class="scroll">
    <table>
        
        <tbody>
            <tr>
                <td>
                    Name #1
                </td>
                <td>
                    Description
                </td>
            </tr>
            <tr>
                <td>
                    Name #2
                </td>
                <td>
                    Description
                </td>
            </tr>
            <tr>
                <td>
                    Name #3
                </td>
                <td>
                    Description
                </td>
            </tr>
        </tbody>
    </table>
</div>
</div>

CSS

table {
    
    width: auto;
}
div.fixed{
    position:absolute;
}
.wrapper{
    width:400px;
}
table > thead > tr > td {
    
    min-width: 100px;
    max-width: 100px;
    
    padding: 10px 20px;
    border-right: 1px solid #666666;
    background-color: #cccccc;
}

table > thead > tr > td.second {
    
    min-width: 200px;
    max-width: 200px;
}

table > tbody > tr > td {
    
    padding: 30px 0;
}

div.scroll {
 
    max-width: 400px;
    max-height: 200px;
    overflow: auto;
}