JSFiddle - React, Tailwind, and code Playground

by Jay Zelenkov

HTML

<div class="wrapper">
  <div class="leftTable">
    <table>
      <tr><td>one</td></tr>
      <tr><td>two</td></tr>
      <tr><td>three</td></tr>
      <tr><td>one</td></tr>
      <tr><td>two</td></tr>
      <tr><td>three</td></tr>
      <tr><td>one</td></tr>
      <tr><td>two</td></tr>
      <tr><td>three</td></tr>
      <tr><td>one</td></tr>
      <tr><td>two</td></tr>
      <tr><td>three</td></tr>
    </table>
  </div>
  <div class="rightTable">
    <table>
      <tr><td>oneoneoneoneoneoneoneoneoneone</td></tr>
      <tr><td>twotwotwotwotwotwotwotwotwotwo</td></tr>
      <tr><td>threethreethreethreethreethree</td></tr>
      <tr><td>oneoneoneoneoneoneoneoneoneone</td></tr>
      <tr><td>twotwotwotwotwotwotwotwotwotwo</td></tr>
      <tr><td>threethreethreethreethreethree</td></tr>
      <tr><td>oneoneoneoneoneoneoneoneoneone</td></tr>
      <tr><td>twotwotwotwotwotwotwotwotwotwo</td></tr>
      <tr><td>threethreethreethreethreethree</td></tr>
      <tr><td>oneoneoneoneoneoneoneoneoneone</td></tr>
      <tr><td>twotwotwotwotwotwotwotwotwotwo</td></tr>
      <tr><td>threethreethreethreethreethree</td></tr>
    </table>
  </div>
</div>
<button class="toggleWidth">Toggle Width!</button>

CSS

td {
    border: 1px solid #ddd;    
}

.leftTable {
    float: left;
    height: 200px;
    overflow: hidden;
}

.rightTable {
    height: 200px;
    width: 440px;
    overflow: auto;
}

.narrow {
    width: 150px;
    height: 217px;
}

JavaScript

$(document).ready(function() {
	$('.rightTable').scroll(function() {
		$('.leftTable').scrollTop($(this).scrollTop());
	});
    
    $('.toggleWidth').click(function() {
        $('.rightTable').toggleClass('narrow');
        
    });
});