JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
	<!-- Контейнер с адаптиными блоками -->
	<div class="masonry">
		<!-- Адаптивные блоки с содержанием -->
		<div class="item">
			<div class="item_img">
				<a href="#"><img src="http://placehold.it/300x200"></a>
			</div>
			<div class="pf_content">
				<h4>Ullamcorper Nibh Parturient</h4>
				<p>Morbi leo risus, porta ac consectetur at eros. Maecenas sed diam eget risus varius blandit sit amet non magna. Duis mollis, porttitor ligula, eget lacinia odio sem nec elit. </p>
				<div class="hr"></div>
				<div class="details">
					<span class="date"><i class="fa fa-calendar-o" aria-hidden="true"></i> <a href="#">17 January,2012 </a></span>
					<span class="comments"><i class="fa fa-comments" aria-hidden="true"></i><a href="#">15</a></span>
				</div>
			</div>
		</div>
		<div class="item">
			<div class="item_img">
				<a href="#"><img src="http://placehold.it/300x200"></a>
			</div>
			<div class="pf_content">
				<h4>Ullamcorper Nibh Parturient</h4>
				<p>Morbi leo risus, porta ac consectetur at eros. Maecenas sed diam eget risus varius blandit sit amet non magna. Duis mollis, porttitor ligula, eget lacinia odio sem nec elit. </p>
				<div class="hr"></div>
				<div class="details">
					<span class="date"><i class="fa fa-calendar-o" aria-hidden="true"></i> <a href="#">17 January,2012 </a></span>
					<span class="comments"><i class="fa fa-comments" aria-hidden="true"></i><a href="#">15</a></span>
				</div>
			</div>
		</div>
		<div class="item">
			<div class="item_img">
				<a href="#"><img src="http://placehold.it/300x200"></a>
			</div>
			<div class="pf_content">
				<h4>Ullamcorper Nibh Parturient</h4>
				<p>Morbi leo risus, porta ac consectetur at eros. Maecenas sed diam eget risus varius blandit sit amet non magna. Duis mollis, porttitor ligula, eget lacinia odio sem nec elit. </p>
				<div class="hr"></div>
				<div class="details">
					<span class="date"><i class="fa fa-calendar-o" aria-hidden="true"></i> <a href="#">17...

CSS

/* ------------- Контейнер с адаптивными блоками------------- */

.wrapper{
	max-width: 970px;
	margin: 3em auto;
}

.masonry {
    column-gap: 1.5em; /* Общее расстояние между колонками */
    -moz-column-gap: 1.5em; /* Расстояние между колонками для Firefox */
    -webkit-column-gap: 1.5em; /* Расстояние между колонками  для Safari, Chrome и iOS */
}
 
/* Элементы в виде плиток с содержанием */

 .item {
  display: inline-block;
  overflow: auto;
  max-width: 300px;
  border: 1px solid #E8E8E8;
  background-color: #F7F7F7;
  box-sizing: border-box; /* Изменения алгоритма расчета ширины и высоты элемента.*/
  -moz-box-sizing: border-box; /* Для Firefox */ 
 	-webkit-box-sizing: border-box; /* Для Safari, Chrome, iOS иAndroid */ 
	margin-bottom: 10px;
}
.item h4 {
  font-size: 15px;
  color: #000;
}

.item_img img {
  max-width: 100%;
  height: auto;
}

.pf_content {
  padding: 0 20px;
}
.pf_content p {
  font-size: 13px;
}

.hr {
  width: 100%;
  height: 3px;
  background-image: url(http://i053.radikal.ru/1608/ad/46365c448b57.png);
  background-repeat: repeat-x;
}

.details {
	display:flex;
	justify-content:space-between;
  height: 20px;
  margin: 10px 0;
}


/* Медиа-запросы для различных размеров адаптивного макета */
@media only screen and (min-width: 480px) {
    .masonry {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
}
 
@media only screen and (min-width: 768px) {
    .masonry {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}