JSFiddle - React, Tailwind, and code Playground
HTML
<div class="entry">
<label class="titleText">{{ entry.title }}</label>
<div class="contentContainer">
<img class="image" src="{{ entry.image.url }}">
<p class="contentText">{{ entry.content }}</p>
</div>
</div>
<div class="entry">
<label class="titleText">{{ entry.title }}</label>
<div class="contentContainer">
<img class="image" src="{{ entry.image.url }}">
<p class="contentText">{{ entry.content }}</p>
</div>
</div>
<div class="entry">
<label class="titleText">{{ entry.title }}</label>
<div class="contentContainer">
<img class="image" src="{{ entry.image.url }}">
<p class="contentText">{{ entry.content }}</p>
</div>
</div>
CSS
.entry {
width: 66%;
margin-top: 30px;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid black;
}
.entry::after {
content: '';
display: table;
clear: both;
}
.titleText {
font-family: "Helvetica Neue";
font-size: 24px;
font-weight: bold;
color: #666666;
text-align: left;
font-style: normal;
text-transform: uppercase;
display: block;
margin-bottom: 15px;
}
.contentContainer {
width:100%;
display: block;
}
.contentText {
font-family: "Helvetica Neue";
font-size: 14px;
text-align: left;
font-weight: 200;
display: block;
overflow: hidden;
}
.image {
float: left;
display: block;
background-color: #ff0000;
margin-right: 15px;
width: 90px;
height: 80px;
}