JSFiddle - React, Tailwind, and code Playground

by Scott Kaye

HTML

<table>
	<tr>
		<td>Table Cell 1</td>
		<td>Table Cell 2</td>
	</tr>
	<tr>
		<td>Table Cell 1</td>
		<td>Table Cell 2</td>
	</tr>
</table>

<div class="table">
	<div class="row">
		<div class="cell">Div Cell 1</div>
		<div class="cell">Div Cell 2</div>
	</div>
	<div class="row">
		<div class="cell">Div Cell 1</div>
		<div class="cell">Div Cell 2</div>
	</div>
</div>

CSS

.table {
	display: table;
}

.row {
	display: table-row;
}

.cell {
	display: table-cell;
}

.cell, td {
	border: 1px solid #000;
	vertical-align: top;
	padding: 0;
}

.cell:first-child, td:first-child {
	background: #999;
	width: 200px;
	height: 30px;
	resize: horizontal;
	overflow: hidden;
}

table, .table {
	margin: 20px;
}

table {
	border-collapse: collapse;
}