JSFiddle - React, Tailwind, and code Playground

by otinanaipali

HTML

<div class="wrap">
    <div class="row">
        <div></div>
        <div></div>
    </div>
	<div class="row">
        
    </div>
	<div class="row">
        
    </div>
</div>

CSS

html,body {height:100%;max-height:100%;padding:0;margin:0}
.wrap{height:100%}
.row{height:33.3333%;white-space:nowrap;font-size:0;text-align:center;background:#c00;box-shadow:inset 0 0 1px #ccc;position:relative}
.row *{vertical-align:middle}
.row > div{display:inline-block;height:100%;width:33.3333vh;background:#fff;text-align:center;box-shadow:inset 0 0 1px #ccc}
.row > div::after{content:"Text here with wrap";line-height:18px;font-size:14px;display:inline-block;vertical-align:middle;white-space:normal}
.row > div + div::after{content:"Text here"}