JSFiddle - React, Tailwind, and code Playground

by klierik

HTML

<table class="layout">
	<tr>
		<td class="cell">
			<div class="inner"></div>
		</td>
		<td class="cell">
			<div class="inner"></div>
		</td>
		<td class="cell">
			<div class="inner"></div>
		</td>
	</tr>
</table>

SCSS

$gutter: 30px;

body {
	padding: 5%;
}

.layout {
	width: calc(100% + #{$gutter});
	margin-left: ($gutter / -2);
	table-layout: fixed;
	
	.cell {
		width: 33.33333%;
	}
	
	.inner {
		margin: 0 ($gutter / 2);
		height: 100px;
		
		background: #eee;
	}
}