JSFiddle - React, Tailwind, and code Playground
HTML
<ul class="wrap">
<li>
<div class="content">
<div class="left-container">
<img src="http://vignette2.wikia.nocookie.net/fantheories/images/4/43/Toy-Story-Theme-Song-6.jpg/revision/latest?cb=20140624192735"/>
</div>
<div class="right-container">
<h2>
Item 1
</h2>
<p>
Text text text.
</p>
</div>
</div>
</li>
<li>
<div class="content">
<div class="left-container">
<img src="http://vignette2.wikia.nocookie.net/fantheories/images/4/43/Toy-Story-Theme-Song-6.jpg/revision/latest?cb=20140624192735"/>
</div>
<div class="right-container">
<h2>
Item 2
</h2>
<p>
Text text text.
</p>
</div>
</div>
</li>
<li>
<div class="content">
<div class="left-container">
<img src="http://vignette2.wikia.nocookie.net/fantheories/images/4/43/Toy-Story-Theme-Song-6.jpg/revision/latest?cb=20140624192735"/>
</div>
<div class="right-container">
<h2>
Item 2
</h2>
<p>
More text, more text, more text.
</p>
</div>
</div>
</li>
</ul>
CSS
.wrap {
display: block;
list-style: none;
position: relative;
padding: 0;
margin: 0;
border: 0;
width: 100%;
}
.wrap li {
width: 100%;
clear: both;
display: block;
min-height: 200px;
float: left;
margin: 0;
padding: 0;
}
.wrap li:first-child {
background-color: green;
}
.wrap li:nth-child(2) {
background-color: blue;
}
.wrap li:nth-child(3) {
background-color: yellow;
}
.content {
margin: 0 auto;
max-width: 66rem;
width: 90%;
padding: 0;
border: 0;
position: relative;
}
.left-container {
float: left;
width: 48%;
overflow: hidden;
}
.right-container {
float: right;
width: 48%;
overflow: hidden;
}
.left-container img {
display: inline-block;
float: left;
box-sizing: border-box;
max-width: 100%;
height: auto;
margin: 25px 0 0 0;
}