JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="latest">
<div id="section-header"><h4>NEWS</h4></div>
<div class="row">
<div id="article-container" class="col-md-3 col-sm-3">
<div id="article">
<figure>
<img class="img-responsive" src="http://i.imgur.com/74aBLNQ.jpg" />
</figure>
<h4><a href="#">About surviving despite of everything</a></h4>
<div id="meta" class="row">
<div id="meta-category" class="col-md-9"><a href="#">CATEGORY</a></div>
<div id="meta-view" class="col-md-2 col-md-offset-1">124</div>
</div>
</div>
</div>
<div id="article-container" class="col-md-3 col-sm-3">
<div id="article">
<figure>
<img class="img-responsive" src="http://i.imgur.com/m0D77HS.jpg" />
</figure>
<h4><a href="#">About surviving despite of everything</a></h4>
<div id="meta" class="row">
<div id="meta-category" class="col-md-9"><a href="#">CATEGORY</a></div>
<div id="meta-view" class="col-md-2 col-md-offset-1">124</div>
</div>
</div>
</div>
<div id="article-container" class="col-md-3 col-sm-3">
<div id="article">
<figure>
<img class="img-responsive" src="http://i.imgur.com/995osiQ.jpg" />
</figure>
<h4><a href="#">About surviving despite of everything</a></h4>
<div id="meta" class="row">
<div id="meta-category" class="col-md-9"><a href="#">CATEGORY</a></div>
<div id="meta-view" class="col-md-2 col-md-offset-1">124</div>
</div>
</div>
</div>
<div id="article-container" class="col-md-3 col-sm-3">
<div id="article">
<figure>
<img class="img-responsive" src="http://i.imgur.com/JI7P0ZJ.jpg"...
CSS
body {
background: #ebebeb;
}
#article-container {
padding: 1em;
}
#article {
padding: 0;
background: #FFF;
height: auto;
margin-bottom: -99999px;
padding-bottom: 99999px;
box-shadow: 0 1px 3px 0 rgba(0,0,0,.2)
}
#article figure {
max-width: 100%;
height: auto;
}
#article figure img {
/*height: 30%;*/
}
#article h4 {
padding: 1em;
}
#article h4 a{
text-decoration: none;
color: #000;
}
#article h4 a:hover {
text-decoration: underline;
}
#meta{
color: #ccc;
width:100%;
padding-left: 1em;
}
#meta a {
text-decoration: none;
color: #ccc;
}
#meta a:hover {
text-decoration: underline;
}
#latest {
padding-left:2em;
overflow: hidden;
}
#section-header {
height: 40px;
width:100%;
background: #FFF;
display:table;
border-left: 5px #FFC640 solid;
margin-left: 0;
margin-top:2em;
box-shadow: 0 1px 3px 0 rgba(0,0,0,.2)
}
#section-header h4 {
padding-left: 1em;
vertical-align:middle;
display:table-cell;
}