JSFiddle - React, Tailwind, and code Playground

by fiddleyetu

HTML

<div id="tablecontainer">
    
<table id="lefttable" style="width:120px" >
<thead>
<tr>
  <th>Firstname</th>
  <th>Lastname</th> 
</tr>
 </thead>
 <tbody>
<tr>
  <td>Eve abcdef</td>
  <td>Jackson</td> 
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td> 
</tr>   
<tr>
  <td>Evefffff sdfsdf</td>
  <td>Jackson</td> 
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td> 
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td> 
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td> 
  <tr>
  <td>Eve</td>
  <td>Jackson</td> 
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td> 
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td> 
</tr>    
</tr>
</tbody>
</table>


<table id="righttable">
<thead>
<tr>
  <th>Head1</th>
  <th>Head2</th> 
  <th>Head3</th>
  <th>Head4</th> 
</tr>
 </thead>
 <tbody>
<tr>
  <td>12</td>
  <td>13</td>
  <td>14</td>
  <td>15</td> 
</tr>
<tr>
   <td>12</td>
  <td>13</td>
  <td>14</td>
  <td>15</td> 
</tr>   
<tr>
   <td>12</td>
  <td>13</td>
  <td>14</td>
  <td>15</td> 
</tr>
<tr>
   <td>12</td>
  <td>13</td>
  <td>14</td>
  <td>15</td> 
</tr>
<tr>
   <td>12</td>
  <td>13</td>
  <td>14</td>
  <td>15</td> 
</tr>
<tr>
   <td>12</td>
  <td>13</td>
  <td>14</td>
  <td>15</td> 
  <tr>
   <td>12</td>
  <td>13</td>
  <td>14</td>
  <td>15</td> 
</tr>
<tr>
  <td>12</td>
  <td>13</td>
  <td>14</td>
  <td>15</td> 
</tr>
<tr>
  <td>12</td>
  <td>13</td>
  <td>14</td>
  <td>15</td> 
</tr>    
</tr>
</tbody>
</table>

</div>

CSS

#lefttable{
    float:left;
margin-right:10px;
  
    
}
table,th,td
{
border:1px solid black;
}

#tablecontainer{
        overflow:scroll;
    height:200px;
}
td,th {
    white-space: nowrap;
}