Cara nem precisa de CSS além das classes nativas do Bootstrap. Vc pode usar as classes `Flex` do *framework* para ajustar isso. Consulte aqui https://getbootstrap.com/docs/4.1/utilities/flex/ Repare que primeiro vc precisa colocar a `.row` com 100% de altura do pai, para isso use a classe `h-100`, depois vc alinha os filhos da parte de baixo com `align-self-end` para eles ficarem na base da `col` Veja como fica <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-html --> <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" /> <div class="row"> <div class="col-6"> a <br /> <br /> <br /> <br /> <br /> <br /> final </div> <div class="col-6"> <div class="row h-100"> <div class="col-6"> b </div> <div class="col-6"> c </div> <div class="col-6 align-self-end"> d </div> <div class="col-6 align-self-end"> e </div> </div> </div> </div> <!-- end snippet --> [Código Funcioando.][1] [1]: https://jsfiddle.net/hqwtaroy/