JSFiddle - React, Tailwind, and code Playground

HTML

<div class="b-screenshot">
		<div class="b-screenshot_head">
			<h2 class="b-screenshot-caption">Screenshots</h2>
			<div class="b-screenshot__content">
				<div class="content_square"></div>
				<div class="content_text">
					<h3 class="content_text-caption">The description for the image</h3>
					<p class="content_text-desc">Pariatur iure ab sunt nesciunt, quibusdam odio iste cumque itaque, ipsa vel exercitationem ullam quos aut nostrum cupiditate fuga quaerat quam animi dolores. Sequi itaque, unde perferendis nemo debitis dolor.</p>
				</div>
			</div>
			<div class="b-screenshot__content">
				<div class="content_square"></div>
				<div class="content_text">
					<h3 class="content_text-caption">The description for the image</h3>
					<p class="content_text-desc">Pariatur iure ab sunt nesciunt, quibusdam odio iste cumque itaque, ipsa vel exercitationem ullam quos aut nostrum cupiditate fuga quaerat quam animi dolores. Sequi itaque, unde perferendis nemo debitis dolor.</p>
				</div>
			</div>
			<div class="b-screenshot__content">
				<div class="content_square"></div>
				<div class="content_text">
					<h3 class="content_text-caption">The description for the image</h3>
					<p class="content_text-desc">Pariatur iure ab sunt nesciunt, quibusdam odio iste cumque itaque, ipsa vel exercitationem ullam quos aut nostrum cupiditate fuga quaerat quam animi dolores. Sequi itaque, unde perferendis nemo debitis dolor.</p>
				</div>
			</div>
			<div class="b-screenshot__content">
				<div class="content_square"></div>
				<div class="content_text">
					<h3 class="content_text-caption">The description for the image</h3>
					<p class="content_text-desc">Pariatur iure ab sunt nesciunt, quibusdam odio iste cumque itaque, ipsa vel exercitationem ullam quos aut nostrum cupiditate fuga quaerat quam animi dolores. Sequi itaque, unde perferendis nemo debitis dolor.</p>
				</div>
			</div>
			

		</div>
	</div>

CSS

.b-screenshot {
	padding: 50px;
	background-color: #fff;
}


.b-screenshot_head {
	width: 1280px;
	margin: 0 auto;
}

.content_square {
	width: 200px;
	height: 150px;
	background-color: black;
	float: left;
}

.content_square:nth-child(even) {
	float: right;
}

.content_text {
	max-width: 33.33333%;
	float: right; 
}

.content_text:nth-child(even) {
	float: left;
}

.b-screenshot_head:after {
	clear: both;
	display: table;
	content: '';
}

.b-screenshot-caption {
	text-align: center;
	color: #445161;
	padding-bottom: 50px;
}

.content_text-caption {
	color: #445161;
	padding: 15px;
	margin-top: -15px;
}

.content_text-desc {
	color: #445161;
	padding: 15px;
	position: relative;
	top: -35px;
	max-width: 84%;
}