Hello! I am a backend-boxer, and set the layout task. There are two blocks A and B, which may have different heights. The question is how to align them at the bottom edge as shown in the figure.

Picture

    2 answers 2

    Using Flexbox :

    .db { display: flex; align-items: flex-end; } .d1 { background-color: blue; } .d2 { background-color: red; } 
     <div class="db"> <div class="d1"> текст текст </div> <div class="d2"> текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст </div> </div>

      Set these blocks to vertical-align: bottom;

       .a,.b{ width: 100px; display: inline-block; background-color: silver; vertical-align: bottom; } .a{ height: 200px; } .b{ height: 160px; } 
       <div class="a"></div> <div class="b"></div>