JSFiddle - React, Tailwind, and code Playground

by yash009

HTML

<div class="card c1 txts" id="txt1">
	<div class="text-part">
		<p>
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident unde aliquam error, mollitia quam cum odit possimus voluptatum labore animi explicabo facilis ullam suscipit! Dolore dolorum porro expedita assumenda quam!
		</p>
    </div>
	<div class="img-part">
		<img src="https://source.unsplash.com/1600x900/?nature"/>
	</div>
</div>
<div class="card c1 txts" id="txt2">
	<div class="text-part">
		<p>
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident unde aliquam error, mollitia quam cum odit possimus voluptatum labore animi explicabo facilis ullam suscipit! Dolore dolorum porro expedita assumenda quam!
		</p>
	</div>
	<div class="img-part">
		<img src="https://source.unsplash.com/1600x900/?nature"/>
	</div>
</div>

CSS

.text-part, .img-part {
  float: left;
}
.text-part {
  width: 50%;
}
.img-part {
  width: 50%;
}
.img-part img {
  max-width: 100%;
}
.card {
  background-color: #000000;
}