JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Первый вариант: зарание известна высота.</h1>
	<div class="wrapper1">
		<div class="left"></div>
		<div class="right"></div>				
	</div>
	<h1>Второй вариант: известно, что содержимое одной из колонок всегда больше, чем другой.</h1>
	<div class="wrapper2">				
		<div class="right">		
			<div class="left">
				<p>sdf s d fsd f s d fs</p>
				<p>sdf s d fsd f s d fs</p>
				<p>sdf s d fsd f s d fs</p>
				<p>sdf s d fsd f s d fs</p>
				<p>sdf s d fsd f s d fs</p>
			</div>
			<p>sdf s d fsd f s d fs</p>
			<p>sdf s d fsd f s d fs</p>
			<p>sdf s d fsd f s d fs</p>													
		</div>
						
	</div>

CSS

* {
	margin: 0;
	padding: 0;
	border: 0;
}
.wrapper1 {
	overflow: hidden;
	position: relative;
	height: 100px;
}
.wrapper1 .left,
.wrapper1 .right {
	float: left;
	width: 50%;
	background: red;
	height:100%;
}
.wrapper1 .right {
	background: green;
}

.wrapper2 .left {
	float: left;	
	width: 50%;
	background: red;
}
.wrapper2 .right {
	background: green;
	overflow: hidden;
}