JSFiddle - React, Tailwind, and code Playground

HTML

<div id="news-list" class="masonry">
            <div id="" class="a item item_mas n-item" style="width: 32.3%; display: block;">
                <a class="a_inner n-item-link" href="http://news.fark.com/newdata/news?ad=876505&amp;bl=82306&amp;ac_bl=81521&amp;ac_ad=865326&amp;ct=adpreview_more&amp;out=1&amp;st=14&amp;in=61INAQCPnhNF6wwAruEMALeXCwCFWw0AO14NAOxQDQC%2B6gwAcHAMALA2DQDBDw0Ak6gMANlfDQA4%0AUA0AcjQNAJ3ICwA6yAwA0KEMADc2DQBycAwAhWENAMEcDQAOXg0ANesMALrdDADFUA0ABwQNALQl%0ADQDuYw0AyAUNAFo2DQA%3D&amp;ag=20" target="_blank">
                    <article class="article">
                        <div class="n-item-image image1" style="" ></div>

                        <h4 class="h4 title n-item-title">Marine to Stand Trial for Wrong-Way Crash that Killed Med Students</h4>
                    </article>
                </a>
            </div>

            <div id="" class="a item item_mas n-item" style="width: 32.3%; display: block;">
                <a class="a_inner n-item-link" href="http://news.fark.com/newdata/news?ad=876505&amp;bl=82306&amp;ac_bl=81521&amp;ac_ad=865326&amp;ct=adpreview_more&amp;out=1&amp;st=14&amp;in=61INAQCPnhNF6wwAruEMALeXCwCFWw0AO14NAOxQDQC%2B6gwAcHAMALA2DQDBDw0Ak6gMANlfDQA4%0AUA0AcjQNAJ3ICwA6yAwA0KEMADc2DQBycAwAhWENAMEcDQAOXg0ANesMALrdDADFUA0ABwQNALQl%0ADQDuYw0AyAUNAFo2DQA%3D&amp;ag=20" target="_blank">
                    <article class="article">
                        <div class="n-item-image image2" alt="news item">
                        </div>
                        <h4 class="h4 title n-item-title">Marine to Stand Trial for Wrong-Way Crash that Killed Med Students</h4>
                    </article>
                </a>
            </div>

            <div id="" class="a item item_mas n-item" style="width: 32.3%; display: block;">
                <a class="a_inner n-item-link"...

CSS

.n-item-image {
    height:100px;
    width:100%;
    background-size: cover;
}

.image1 {
    background:url('http://static3.smi2.net/img/225x150/2357799.jpeg')  no-repeat;
}

.image2 {
    background:url('http://static5.smi2.net/img/225x150/2345726.jpeg')  no-repeat;
    
}

.masonry{

}

  .masonry .item{
    width: 32%;
    display: inline-block !important;
    vertical-align: top !important;    
  }

    .masonry .item .a_inner {
      padding: 0 10px 20px 10px;
      display: block;
      color: #252525;
      font-weight: bold;
      font-size: 16px;
      font-family: 'PT Sans', sans-serif;
      line-height: 18px;
    }  

      .masonry .item .a_inner .article {
        border: 1px solid #efefef;
      }    

        .masonry .item .a_inner img {
          width: 100%;
          height: auto;
          display: block;
          vertical-align: middle;
        }      

        .masonry .item .a_inner .h4 {
          line-height: 18px;
          font-size: 16px;
          margin: 18px;
          font-weight: bold;
          color: #000;
          text-decoration: none;
          overflow: hidden;
        }