TwoRowGrid-flex

by peterjc

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class='container d-flex flex-column flex-grow-1'>    
    <div class='item1 d-flex'>
        aaaaaaaa
    </div>
    
    <div class='item2 d-flex justify-content-end align-items-baseline align-self-baseline'>
    <div>
      bbbbbbbbbb        
      </div>
    </div>
 </div>

CSS

html, body {
    padding:0;
    margin:0;
    width: 100%;
    height: 100%;    
}

.container {
  background: orange;
  height: 100vh;
}

.item1 {
    flex: 1;
    background: pink;
   
}

.item2 {   
    height: 80px;
    background: yellow;    
}