JSFiddle - React, Tailwind, and code Playground

HTML

<div class="news-wrapper">
    <div class="news-image"><img class="img" src="http://gulfnews.com/media/img/gulfnews_logo.png"/></div>
     <div class="news-title"> News Title 1</div>
     <div class="news-source"> Source 1</div>
     <div class="news-description"> Some Descriptionn</div>
</div>
<div class="news-wrapper">
    <div class="news-image"><img class="img" src="http://i.cdn.turner.com/cnn/.e/img/3.0/global/header/intl/hdr-globe-central.gif"/></div>
     <div class="news-title"> News Title 1</div>
     <div class="news-source"> Source 1</div>
     <div class="news-description"> Some Descriptionn</div>
</div>
<div class="news-wrapper">
    <div class="news-image"><img class="img" src="http://news.bbcimg.co.uk/media/images/65881000/jpg/_65881249_65881241.jpg"/></div>
     <div class="news-title"> News Title 1</div>
     <div class="news-source"> Source 1</div>
     <div class="news-description"> Some Descriptionn</div>
</div>
<div class="news-wrapper">
    <div class="news-image"><img class="img" src="http://www.zawya.com/images/cia/large/130213070447ptjw.jpg"/></div>
     <div class="news-title"> News Title 1</div>
     <div class="news-source"> Source 1</div>
     <div class="news-description"> Some Descriptionn</div>
</div>

CSS

.news-wrapper
{
    width:600px;    height:100px;    margin:10px 0px 10px 0px; 
    background-color:#336699;     
}
.news-image
{
   float:left;    width:80px;    height:80px;
    text-align:center;
}
.img
{
width:70px;
}
.news-title
{
float:left;
    width:480px;
    height:20px;
    margin-left:10px;
     background-color:#ccc;  
}
.news-source
{
float:left;
    width:480px;
    height:20px;
    margin-left:10px;
     background-color:#ddd;  
}
.news-description
{
float:left;
    width:480px;
    height:50px;
    margin-left:10px;
     background-color:#f5f5f5;  
}