JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
				<li>
					<div class="inner">
						<h2>Title Title Title Title Title Title</h2>
						<div class="image">
							<img src="http://baconmockup.com/250/200" alt="" />
						</div>
					</div>
				</li>
				<li>
					<div class="inner">
						<h2>Title</h2>
						<div class="image">
							<img src="http://baconmockup.com/250/200" alt="" />
						</div>
					</div>
				</li>
			</ul>
			
			<ul>
				<li>
					<div class="inner">
						<h2>Title Title Title Title Title Title</h2>
						<div class="image">
							<img src="http://baconmockup.com/250/200" alt="" />
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, eveniet.</p>
						</div>
					</div>
				</li>
			
				<li>
					<div class="inner">
						<h2>Title</h2>
						<div class="image">
							<img src="http://baconmockup.com/250/200" alt="" />
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium, odio vel blanditiis id ea dolorum expedita fugit incidunt commodi.</p>
						</div>
					</div>
				</li>
			</ul>

CSS

img {
  max-width: 100%;
}

ul {
	display: flex;
}
li {
	box-sizing: border-box;
	display: flex; 
	padding: 15px;
	width: 50%;
}

.inner {
	background-color: #FAFAFA;
	display: flex;
	flex-direction: column;
	padding: 10px;
	width: 100%;
}
h2 {
  flex-basis: 2em;
}