JSFiddle - React, Tailwind, and code Playground

HTML

<div style=width:100%;height:100%;>
		<div class=table id=table1>

			<div class=cell><div class=bg><div class=text>One Line</div></div></div>
			<div class=cell><div class=bg><div class=text>Two<br/>Lines</div></div></div>
			<div id=capT1 class=cell><div class=bg><div class=text>More<br/>Than two<br/>Lines</div></div></div>

			<div class=forHeight>One Line</div>
			<div class=forHeight>Two<br/>Lines</div>
			<div id=capH1 class=forHeight>More<br/>Than two<br/>Lines</div>
		</div>

		<div class=table id=table2>
			<div id=capT2 class=cell><div class=bg><div class=text>More<br/>Than two<br/>Lines</div></div></div>

			<div id=capH2 class=forHeight>More<br/>Than two<br/>Lines</div>
		</div>
	</div>

CSS

div {
		display:inline-block;
		margin:0;
		padding:0;
		border:0;
		overflow:hidden;
		box-sizing:border-box;
	}
	.table {
		position:relative;
		display:block;
		width:100%;
		border:1px solid red;
		white-space:nowrap;
	}
	.cell {
		position:absolute;
		top:0;
		bottom:0;
	}
	.forHeight {
		width:0;
		visibility:hidden;
	}
	.bg {
		height:100%;
		background-color:lavender;
	}
	.text {
		height:100%;
		padding-left:5px;
	}


	@media (max-width: 768px) {

		#capH1,#capT1 { display:none }


		#table1 .cell:first-child {
			width:50%;
		}
		#table1 .cell:nth-child(2) {
			width:50%;
			left:50%;
			border-left:1px solid red;
		}
		#table1 .cell:first-child .bg {
			margin-left:10px;
			width:calc(100% - 15px);
            height: 500px;
		}
		#table1 .cell:nth-child(2) .bg {
			margin-left:5px;
			width:calc(100% - 15px);
		}
		#table2 {
			border-top-width:0;
		}
		#table2 .cell {
			width:100%;
		}
		#table2 .cell .bg {
			margin:0 10px;
			width:calc(100% - 20px);
		}
	}

	@media (min-width:769px) {

		#capH2,#capT2,#table2 { display:none }
			
		.cell {
			width:calc(100% / 3);
		}
		.cell:first-child .bg {
			margin-left:10px;
			width:calc(100% - 15px);
		}
		.cell:nth-child(2) {
			border:solid red;
			border-width:0 1px;
			left:calc(100% / 3);
		}
		.cell:nth-child(3) {
			left:calc(200% / 3);
		}
		.cell:nth-child(2) .bg {
			margin-left:5px;
			width:calc(100% - 10px);
		}
		.cell:nth-child(3) .bg {
			margin-left:5px;
			width:calc(100% - 15px);
		}
	}