JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flex-layout">
			<div class="content">

<div class="wrap" style="margin-top: 20px;">
  <table style="width: 100%;">
	<thead>
		<tr>
			<td><div style="width:100px;"></div></td>
			<td style="width:33%;"></td>
			<td style="width:66%;"></td>
		</tr>
	</thead>
	<tbody>
	  <tr>
		<td>data 1</td>
		<td>data 2</td>
		<td>data 3</td>
	  </tr>
	  <!-- other data... -->
	</tbody>
  </table>
</div>

			</div>
			<div class="right" style="width: 100px;"></div>
		</div>

CSS

body {
    margin: 0;
    padding: 0;
}

.flex-layout {
	display: flex;
	flex-direction: row;
	width: 100%;
	height: 100%;
	position: absolute;
}

.content {
	flex: 1;
}

.right {
	
}

tbody td {
	border: 1px solid black;
}

JavaScript

function imitationChangePanelWidth () {
	var right = document.querySelector('.right');
	var width = parseInt(right.style.width);
	if (width >= 300) width = 0;
	right.style.width = (width + 50) + 'px';
}
setInterval(imitationChangePanelWidth, 2000);