JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid grid-3 red">
    <div class="grid-1 blue">i'm 1</div>
    <div class="grid-2 yellow">
        <div class="grid-1 green">i'm half of 2</div>
        <div class="grid-1 white">i'm also half of 2</div>
    </div>
</div>

SCSS

// Design for illustration only
.red, .blue, .yellow, .green, .white {
  border: dotted 1px black;
  padding: 3px;
}

.red { background: red; }
.blue { background: blue; }
.yellow { background: yellow; }
.green { background: green; }
.white { background: white; }

// Start grid code

.grid {
    display: block;
	width: 100%;
	white-space: nowrap !important;
}

.grid > * {
    white-space: normal;
}

.grid,
.grid > :first-child {
	padding-right: 0 !important;
}

.grid-4 {
	.grid-1 {
		width: 25%;
	}

	.grid-2 {
		width: 50%;
	}

	.grid-3 {
		width: 75%;
	}
}

.grid-3 {
	.grid-1 {
		width: 33.3%;
	}

	.grid-2 {
		width: 66.6%;
	}
}

.grid-2 {
	.grid-1 {
		width: 50%;
	}
}

.grid-1,
.grid-2,
.grid-3,
.grid-4 {
	-webkit-box-sizing: border-box;
	display: inline-block;
	margin-right: -3px;
	vertical-align: top;
    position: relative;
}