JSFiddle - React, Tailwind, and code Playground

by villard

HTML

<div class="parent">
	<div class="child1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam massa arcu, dignissim sit amet lobortis vel, lobortis id ipsum. Nulla ut mi vulputate neque vulputate tristique in ac odio.</div>
	<div class="child2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam massa arcu, dignissim sit amet lobortis vel, lobortis id ipsum. Nulla ut mi vulputate neque vulputate tristique in ac odio.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam massa arcu, dignissim sit amet lobortis vel, lobortis id ipsum. Nulla ut mi vulputate neque vulputate tristique in ac odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam massa arcu, dignissim sit amet lobortis vel, lobortis id ipsum. Nulla ut mi vulputate neque vulputate tristique in ac odio.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam massa arcu, dignissim sit amet lobortis vel, lobortis id ipsum. Nulla ut mi vulputate neque vulputate tristique in ac odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam massa arcu, dignissim sit amet lobortis vel, lobortis id ipsum. Nulla ut mi vulputate neque vulputate tristique in ac odio.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam massa arcu, dignissim sit amet lobortis vel, lobortis id ipsum. Nulla ut mi vulputate neque vulputate tristique in ac odio.</div>
	<div style="clear: both;"></div>
</div>

CSS

.parent {
		margin: 0 auto;
		max-width: 700px;
		overflow: hidden;
	}
	.child1, .child2 {
		float: left;
		margin-bottom: -20000px;
		padding-bottom: 20000px;
		width: 50%;
	}
	.child1 {
		background: red;
	}
	.child2 {
		background: yellow;
	}