JSFiddle - React, Tailwind, and code Playground
HTML
<div class="view-reasons">
<div class="views-reasons-row">
<div class="views-field views-field-field-icon">
<div class="field-content"><img src="http://placekitten.com/200/300" width="145" height="145" alt=""></div>
</div>
<div class="views-field views-field-counter"><span class="field-content">1</span></div>
<div class="views-field views-field-body">
<div class="field-content"><p>Some text goes here.Some text goes here.Some text goes here.Some text goes here.Some text goes here.Some text goes here.Some text goes here.Some text goes here.</p></div>
</div>
</div>
<div class="views-reasons-row">
<div class="views-field views-field-counter"><span class="field-content">2</span></div>
<div class="views-field views-field-body">
<div class="field-content"><p>Some text goes here.Some text goes here.Some text goes here.Some text goes here.Some text goes here.Some text goes here.Some text goes here.Some text goes here.</p></div>
</div>
<div class="views-field views-field-field-icon">
<div class="field-content"><img src="http://placekitten.com/200/300" width="145" height="145" alt=""> </div>
</div>
</div>
<div class="row">
<div class="views-field views-field-field-icon">
<div class="field-content"><img src="http://placekitten.com/200/300" width="145" height="145" alt=""></div>
</div>
<div class="views-field views-field-counter"><span class="field-content">3</span></div>
<div class="views-field views-field-body">
<div class="field-content"><p>Some text goes here.Some text goes here.Some text goes here.Some text goes here.Some text goes here.Some text goes here.Some text goes here.Some text goes here.</p></div>
</div>
</div>
<div class="row">
<div class="views-field views-field-field-icon">
<div class="field-content"><img...
CSS
/* Text styles */
.view-reasons .views-field-counter{
color:#333333;
font-size:46px;
font-family:'Domine', serif;
font-weight:700;
}
.view-reasons span.why-big{
font-size:32px;
font-family:'Domine', serif;
font-weight:700;
}
/* Layout */
.view-reasons .views-reasons-row{
border-bottom:1px dotted #464637;
padding-bottom:15px;
margin-bottom:15px;
}
.view-reasons .views-field-field-icon img{
padding-left:25%;
}
.view-reasons .views-field-body{
display:inline-block;
width:43%;
margin-right:2%;
vertical-align: top;
}
.view-reasons .views-field-field-icon{
display:inline-block;
width:41%;
margin-right:0;
}
.view-reasons .views-field-counter{
display:inline-block;
width:6%;
margin-right:1%;
vertical-align: top;
}
.row {
border-bottom:1px dotted #464637;
padding-bottom:15px;
margin-bottom:15px;
min-height: 150px;
}
.row .views-field-field-icon{
display:inline-block;
width:41%;
margin-right: 0;
}
.row:nth-child(even) .views-field-field-icon{
position: absolute;
right: 0px;
padding-right: 6%;
}