<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'> <div class='container'> <div class='list-card'> <div class='list-label'>NEW LAUNCH</div> <img alt='' src='https://is1-1.housingcdn.com/4f2250e8/cec532fdfbfb4c0213bee9f5028c4486/v1/_logo.jpg'> <div class='list-details'> <div class='list-name'>World Trade Center</div> <button class='list-callback'>Request Callback</button> <button class='list-shortlist'><3</button> <div class='list-landmark'>Neptune Group</div> <div class='list-location'>Bandra West, South Mumbai</div> <div class='list-rooms'>2, 3, 4 BHK Apartments & Penthouse</div> <div class='list-price'>3.4 Cr.</div> <div class='list-bottom'> <div class='list-bottom-section'> <span>1200/sqft</span> <span>Avg Price/sq.ft.</span> </div> <div class='list-bottom-section'> <span>1200/sqft</span> <span>Carpet Area</span> </div> <div class='list-bottom-section'> <span>1200/sqft</span> <span>Carpet Area</span> </div> </div> </div> </div> </div> </link>

html { background-color: #eee; font-family: 'Lato'; } .container { width: 750px; margin: 0 auto; background-color: #fff; overflow: auto; } .container .list-card { padding: 15px; overflow: auto; } .container .list-card img { width: 240px; height: 180px; background-color: green; border: 0; display: inline-block; float: left; margin-right: 18px; } .list-label { background-color: #1fc055; display: inline-block; position: absolute; margin-left: -5px; margin-top: 10px; font-size: 12px; padding: 4px; color: #fff; } .list-details { float: none; } .list-name { font-size: 20px; display: inline-block; } .list-landmark, .list-location { font-size: 12px; opacity: 0.5; margin: 2px 0; } .list-rooms { font-size: 12px; } .list-price { font-size: 20px; margin-top: 16px; } .list-bottom { display: inline-block; overflow: auto; margin-top: 26px; } .list-bottom .list-bottom-section { width: 120px; box-sizing: border-box; float: left; font-size: 14px; padding: 0 20px; border-left: 1px solid #e5e5e5; } .list-bottom .list-bottom-section span:last-of-type { opacity: 0.5; } .list-bottom .list-bottom-section:first-of-type { padding-left: 0; border-left: 0; } .list-bottom .list-bottom-section span { display: block; } .list-callback, .list-shortlist { float: right; } .list-shortlist { margin-right: 15px; }