Info card

HTML

<script src="&lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css&quot;&gt;"></script>
<script src="href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css&quot; "></script>
<div class="container-fluid"><!-- ALL CARD CONTAINER -->
  <div class="pinGridWrapper">
<div class="pin" id="pin"> 
<div class="pull-right intrest-box">
<input type="checkbox" class="faChkRnd" id="like" ><label></label> 
</div>    
<p class="pull-left">13.01.16  </p> <!-- date -->     
<h2>Title </h2> <!-- title-->   
<p> </p>
<div class="text-center">    
<p class="card-title"><a href="http://www.jobsearch.az/vacancies20504_en.html" class="">Like</p></a>        
</div>
</div>
</div>
</div>

CSS

/**
*
* CSS Only Responsive Pinterest Style Grid
* ----------------- 
* Copyright (c) 2014 CodeNorris.com
* Licensed under MIT (https://github.com/CodeNorris/PinterestStyleGrid/blob/master/LICENSE)
*
**/
* {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
body {
	background: #eee;
	width: 100%;
	font-family: 'Source Sans Pro', sans-serif;
}
.pinGridWrapper {
	width: 98%;
	margin: auto;
}
.pinGridWrapper h1 {
	font-size: 2.0em;
	padding: 20px 0 20px 0;
	text-align: center;
}
.pinGrid {
	-webkit-column-count: 2;
	-webkit-column-gap: 15px;
	-moz-column-count: 2;
	-moz-column-gap: 15px;
	column-count: 2;
	column-gap: 15px;
}
.pin {
	display: inline-block;
	background: #fff;
	border-radius: 0px;
    border-top:2px solid #2c3e50;
	-webkit-box-shadow: 0 6px 6px -6px #ccc;
	-moz-box-shadow: 0 6px 6px -6px #ccc;
	box-shadow: 0 6px 6px -6px #ccc;
	margin: 0 0 15px;
	-webkit-column-break-inside: avoid;
	-moz-column-break-inside: avoid;
	column-break-inside: avoid;
	width: 260px;
	max-width: 100%;
}
.pin img {
	width: 100%;
	height: auto;
	-webkit-border-radius: 0px 0px 0 0;
	-moz-border-radius: 0px 0px 0 0;
	border-radius: 0px 0px 0 0;
}
.pin h2 {
	font-size: 1.2em;
	padding: 10px;
	border-bottom: 1px solid #ccc;
}
.pin p {
	padding: 10px;
	color: #333;
}
@media (min-width:0px) {
.pinGrid {
	-webkit-column-count: 1;
	-moz-column-count: 1;
	column-count: 1;
}
}
 @media (min-width: 870px) {
.pinGrid {
	-webkit-column-count: 3;
	-moz-column-count: 6;
	column-count: 6;
}
}
 @media (min-width: 1160px) {
.pinGrid {
	-webkit-column-count: 5;
	-moz-column-count: 5;
	column-count: 5;
}
}
 @media (min-width: 1450px) {
.pinGrid {
	-webkit-column-count: 6;
	-moz-column-count: 6;
	column-count: 6;
}
}