JSFiddle - React, Tailwind, and code Playground

by Max Lensky

HTML

<div class="wrapper"> 
  <div class="post"> 
		<p><img src="http://www.ethicsandentrepreneurship.org/wp-content/uploads/2015/08/steve-jobs.jpg" /> 
		 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
		</p>
	</div>
  <div class="post"> 
		<p><img src="http://www.ethicsandentrepreneurship.org/wp-content/uploads/2015/08/steve-jobs.jpg" /> 
		 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
		</p>
	</div>
  <div class="post"> 
		<p><img src="http://www.ethicsandentrepreneurship.org/wp-content/uploads/2015/08/steve-jobs.jpg" /> 
		 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
		</p>
	</div>
</div>

CSS

*{
	margin:0;
	padding:0;
}
html,body{
	min-height:100%;
}
.wrapper{
	width:90%;
	margin:auto;
	background:rgba(243,245,246,1);
	padding:10px;
}
.post{
	width:32%;
	min-height:50px;
	border:1px solid transparent;
	float:left;
	background:rgb(207,209,210);
	margin:0 .5%;
}
.wrapper:after,
.post:after{
	content:'';
	clear:both;
	display:block;
}
.post p img{
	width:10vw;
	height:auto;
	margin:5px;
	float:left;
}
.post p{
	font-size:2vw;
	display:block;
	width:90%;
	text-align:justify;
}
@media screen and (max-width:720px) {
	.wrapper{
		background:none;
	}
	.post{
		clear:all;
		width:90%;
		margin:.5% .6%;
		border-bottom:4px solid transparent;
	}
	.post p{
		font-size:3.6vw !important;
	}
}