JSFiddle - React, Tailwind, and code Playground

HTML

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

<div style="display: flex; flex-direction: row; width: 100%; height: 20px;">
	<div style="width: 100px; border: 1px solid black;">data 1</div>
	<div style="flex: 1; border: 1px solid black;">data 2</div>
	<div style="flex: 2; border: 1px solid black;">data 3</div>
</div>

<div class="wrap" style="margin-top: 20px;">
	<iframe style="width: 100%; height: 0; border: 0;"></iframe>
	<table border="1" style="width: 100%;">
		<colgroup>
			<col data-width="100">
			<col data-flex="1">
			<col data-flex="2">
		</colgroup>
		<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 {
	
}

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);


function updateWidthColumns (table) {
	var parent = table.parentNode;
	var cols = table.querySelectorAll('col');
	
	var width = 0, flex = 0;
	Array.prototype.forEach.call(cols, function (col) {
		var w = col.getAttribute('data-width');
		if (w === null) {//flex
			flex += parseInt(col.getAttribute('data-flex'));
		} else {
			width += parseInt(w);
		}
	});
	
	var segment = (parent.offsetWidth - width) / flex;
	
	Array.prototype.forEach.call(cols, function (col) {
		var w = col.getAttribute('data-width');
		if (w === null) {//flex
			var flex = parseInt(col.getAttribute('data-flex'));
			col.style.width = (segment * flex) + 'px';
		} else {
			col.style.width = w + 'px';
		}
	});
}

var table = document.querySelector('table')
frames[0].onresize = e => {
	updateWidthColumns(table);
}