JSFiddle - React, Tailwind, and code Playground

by Jordan Sayner

HTML

<div class="outer-wrapper">
	<div class="outer">
		<div class="inner">
			<img src="https://via.placeholder.com/1000x500" />
		</div>
		<div class="inner">
			text goes here
		</div>
	</div>
</div>

CSS

.outer-wrapper {
	background-color: green;
	position: relative;
	height: 300px;
}

.outer {
	width: 600px;
	margin: 50px auto;
	background-color: yellow;
	display: flex;
	height: 300px;
}

.inner:first-child {
	background-color: pink;
	width: 50%;
	height: 300px;
}

	.inner:first-child img {
		position: absolute;
		left: 0%;
		width: 50%;
	}

.inner:last-child {
	background-color: red;
	width: 50%;
	height: 300px;
}