<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.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=Roboto|Titillium+Web" rel="stylesheet"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container" style="background:#ebebeb;margin:35px;display:table"> <!-- EXAMPLE 1 --> <div class="parent-box"> <div class="box"> <div class="dialog-box"> <p> <a href="#"> Primer titular de prueba... </a> </p> <p> <span> ACTUALIDAD <i class="fa fa-facebook" aria-hidden="true"></i> <i class="fa fa-twitter" aria-hidden="true"></i> </span> </p> </div> <div class="info"> <div style="width:50%;float:left;"> <a href="#">Romina<br>Gomez</a> </div> <div> <img style="max-height:100%;" src="https://www.getmypests.com/layout/images/modern-pest-customer.png" /> </div> </div> </div> </div> <!-- EXAMPLE 2 --> <div class="parent-box"> <div class="box"> <div class="dialog-box"> <p> <a href="#"> Mortgage approvals 'lowest for a year' </a> </p> <p> <span> ECONOMY <i class="fa fa-facebook" aria-hidden="true"></i> <i class="fa fa-twitter" aria-hidden="true"></i> </span> </p> </div> <div class="info"> <div style="width:50%;float:left;"> <a href="#">Alberto<br>Perez</a> </div> <div> <img style="max-height:100%;" src="https://www.eves.co.nz/eves_assets/blog_assets/author/13-image-simon-anderson.png" /> </div> </div> </div> </div> <!-- EXAMPLE 2 --> <div class="parent-box"> <div class="box"> <div class="dialog-box"> <p> <a href="#"> Mortgage approvals 'lowest for a year' </a> </p> <p> <span> ECONOMY <i class="fa fa-facebook" aria-hidden="true"></i> <i class="fa fa-twitter" aria-hidden="true"></i> </span> </p> </div> <div class="info"> <div style="width:50%;float:left;"> <a href="#">Andrés<br>Rodriguez</a> </div> <div> <img style="max-height:100%;" src="http://www.telegraph.co.uk/content/dam/Author%20photos/Marcus_Armytage-small.png" /> </div> </div> </div> </div> </div>

html, body{ background:#ebebeb; } .parent-box{ width:25%;height:300px;float:left;display:flex;; } .info > div:first-of-type{ width: 50%; float: left; align-items: center; padding: 5px; padding-top:30px; display: flex; font-family: 'Titillium Web' } .info > div:first-of-type > a{ padding-left:15px; color:#1E3344; text-decoration: none; } .info > div:last-of-type{ width: 50%; float: left; padding: 5px 0 0 0; display: flex; justify-content: center; align-items: flex-end; } .info > div:last-of-type > img{ width:100%; } .box{ width:100%; height:100%; padding: 15px 15px 0 15px; } .dialog-box span{ font-weight: bold; padding:15px 15px 0px 15px; font-size: 14px; display: table-cell; color:#a2904b; } .dialog-box i{ float: right; margin-right: 16px; margin-top: 7px; } .dialog-box{ background: white; width: 100%; height: 55%; font: normal 20px/25px 'Titillium Web', 'Arial'; display: table; position: relative; letter-spacing: 1px; border-radius: 1px; } .dialog-box > p{ margin: 0; display: table; width: 100%; } .dialog-box > p > a{ padding: 12px 14px 0; text-decoration: none; color:#1E3344; display: table; } .dialog-box:after{ width: 0; height: 0; border-style: solid; border-width: 22px 0px 0 45px; border-color: #ffffff transparent transparent transparent; position: absolute; left: 15%; bottom: -20px; content: close-quote; z-index: 1; } .info{ width: 100%; height: 45%; display: flex; position: relative; border-bottom:2px solid #a2904b; }