JSFiddle - React, Tailwind, and code Playground

HTML

<div class="v-grid ng-scope" mode="mode" style="width: 500px;">
        <div class="v-grid-header" style="padding-right: 0px;">
            <div class="v-grid-header-wrap">
                <table role="grid">
                    <colgroup>
                        <col style="width:300px;">
                        <col style="width:400px;">
                        <col>
                        <col>
                    </colgroup>
                    <thead>
                        <tr role="row">
                            <th  role="cell" >Material</th>
                            <th  role="cell" >Description</th>
                            <th  role="cell" >Valid From</th>
                            <th  role="cell" >Valid To</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
        <div class="v-grid-content" style="height: 130px;">
            <table role="grid">
                    <colgroup>
                        <col style="width:300px;">
                        <col style="width:400px;">
                        <col>
                        <col>
                    </colgroup>
                <tbody>
                    <tr  role="row" >
                        <td  role="cell" >
                            <input   >
                        </td>
                        <td  role="cell" >
                            <input   >
                        </td>
                        <td  role="cell" >
                            <input   >
                        </td>
                        <td  role="cell" >
                            <input   >
                        </td>
                    </tr>
                    <tr  role="row" >
                        <td  role="cell" >
                            <input   >
                        </td>
                        <td  role="cell" >
                            <input   >
                        </td>
                 ...

CSS

.v-grid{
    display: inline-block;
}

.v-grid table[role=grid]{
    width: 100%;
    margin: 0;
    max-width: none;
    border-collapse: separate;
    border-spacing: 0;
    empty-cells: show;
    border-width: 0;
    outline: 0;
    table-layout: fixed;
}
.v-grid .v-grid-header-wrap{
}
.v-grid .v-grid-header table[role=grid]{
  background: #dedede;
}
.v-grid .v-grid-header th[role=cell]{
 font-weight: normal;
 text-align: center;
}
.v-grid .v-grid-header th[role=cell],
.v-grid .v-grid-content td[role=cell]{
    white-space:nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #4a4a4a;
    border-right:1px solid #7d7d7d;
}
.v-grid .v-grid-content td[role=cell]{
    border-bottom: 1px solid #7d7d7d;
}

.v-grid[mode=display] .v-grid-content td[role=cell]{
    padding:2px;
}
.v-grid[mode=display] .v-grid-header th[role=cell],
.v-grid[mode=display] .v-grid-content td[role=cell]{
    padding-left:5px;
    padding-right:3px;
}
.v-grid-content{
    overflow:auto;
}

input{
 width:100%;
 border:1px solid black;
}
colgroup col{
 min-width:50px;
}

JavaScript

$(document).ready(function(){
  $('.v-grid-content').on('scroll',function(){
     var pos = $(this).scrollLeft();
	 if(pos != undefined){
	   $('.v-grid-header-wrap').scrollLeft(pos);
	 }
  });
});