<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <main class="main columns"> <section class="column main-column"> <a class="article first-article" href="#"> <figure class="article-image is-4by3"> <img src="https://www.tajhotels.com/content/dam/luxury/hotels/Taj_Mahal_Delhi/images/new-images/Facade%20-%20Taj%20Mahal,New%20Delhi%20-%20Master.jpg/_jcr_content/renditions/cq5dam.web.1280.1280.jpeg" alt=""> </figure> <div class="article-body"> <h2 class="article-title"> Hello World </h2> <p class="article-content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros. </p> <footer class="article-info"> <span>By Indior Tours</span> <span>45 comments</span> </footer> </div> </a> <a class="article" href="#"> <figure class="article-image is-16by9"> <img src="https://www.tajhotels.com/content/dam/luxury/hotels/Taj_Mahal_Delhi/images/gallery/Dining_Machan.jpg/_jcr_content/renditions/cq5dam.web.512.512.jpeg" alt=""> </figure> <div class="article-body"> <h2 class="article-title"> Hello World </h2> <p class="article-content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis. </p> <footer class="article-info"> <span>By Indior Tours</span> <span>18 comments</span> </footer> </div> </a> </section> <section class="column"> <a class="article" href="#"> <figure class="article-image is-3by2"> <img src="https://www.tajhotels.com/content/dam/luxury/hotels/Taj_Mahal_Delhi/images/gallery/Dining_31985485-H1-HouseofMing-3x2.jpg/_jcr_content/renditions/cq5dam.web.512.512.jpeg" alt=""> </figure> <div class="article-body"> <h2 class="article-title"> Hello World </h2> <p class="article-content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> <footer class="article-info"> <span>By Indior Tours</span> <span>90 comments</span> </footer> </div> </a> <a class="article" href="#"> <div class="article-body"> <h2 class="article-title"> Hello World </h2> <p class="article-content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> <footer class="article-info"> <span>By Indior Tours</span> <span>54 comments</span> </footer> </div> </a> <a class="article" href="#"> <div class="article-body"> <h2 class="article-title"> Hello World </h2> <p class="article-content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> <footer class="article-info"> <span>By Indior Tours</span> <span>81 comments</span> </footer> </div> </a> <a class="article" href="#"> <div class="article-body"> <h2 class="article-title"> Hello World </h2> <p class="article-content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> <footer class="article-info"> <span>By Indior Tours</span> <span>63 comments</span> </footer> </div> </a> </section> </main>

html { background: mediumseagreen; font-family: sans-serif; font-size: 14px; } a { text-decoration: none; } div, h2, p, figure { margin: 0; padding: 0; } .main { margin: 0 auto; max-width: 1040px; padding: 20px; } .columns { display: flex; } .column { display: flex; flex: 1; flex-direction: column; } .main-column { flex: 2; } .article { background: white; color: #666; display: flex; flex: 1; flex-direction: column; flex-basis: auto; margin: 10px; } .article-image { background: #eee; display: block; padding-top: 75%; position: relative; width: 100%; } .article-image img { display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .article-image.is-3by2 { padding-top: 66.6666%; } .article-image.is-16by9 { padding-top: 56.25%; } .article-body { display: flex; flex: 1; flex-direction: column; padding: 20px; } .article-title { color: #333; flex-shrink: 0; font-size: 1.4em; font-weight: bold; font-weight: 700; line-height: 1.2; } .article-content { flex: 1; margin-top: 5px; } .article-info { display: flex; font-size: 0.85em; justify-content: space-between; margin-top: 10px; }