Stick a div at the bottom of another div - html

Question

I'm trying to code this design:
And this is the code I have:
.container-flex {
display: flex;
flex-flow: row;
height: 100px;
}
.left {
flex: 1;
background-color: #2C77A5;
padding-top: 2%;
border-top-left-radius: 6px;
height: 100px;
}
.main {
display: flex;
flex-direction: column;
}
.top {
background: #27698D;
border-bottom: 1px solid #2a2a2a;
border-top-right-radius: 6px;
width: 42px;
height: 50px;
padding-left: 14px;
padding-top: 14px;
}
.middle {
background: #27698D;
border-bottom-right-radius: 6px;
width: 42px;
height: 50px;
padding-left: 14px;
padding-top: 16px;
}
.row-celeste {
height: 22%;
background-color: #8CE8FC;
}
<div class="container-flex">
<div class="left">
<div class="row">
<div class="col-md-7 col-md-offset-1 border-right">
<p class="card-text white-text">Mejorar clima en finanzas</p>
<h4 class="card-subtitle white-text">Ponderación 33%</h4>
</div>
<div class="col-md-4 check-area">
<p class="card-text white-text" id="clicker-calificacion"><i class="fa fa-check text-white" aria-hidden="true"></i> Calificar</p>
</div>
</div>
<div class="row-celeste">
<p class="card-text centered"></p>
</div>
</div>
<section class="main">
<a href="">
<div id="clicker-menu-black" class="col top"><i class="fa fa-bars white-text" aria-hidden="true"></i>
</div>
</a>
<a href="">
<div id="clicker" class="col middle"><i class="fa fa-plus white-text" aria-hidden="true"></i>
</div>
</a>
</section>
</div>
How can I make the light blue row stick to the bottom of ".left" regardless of its height? I've tried positioning, but perhaps I don't really understand it.

Answer 1

You need to use absolute positioning, see the example below:
.container-flex {
display: flex;
flex-flow: row;
height: 100px;
}
.left {
flex: 1;
background-color: #2C77A5;
padding-top: 2%;
border-top-left-radius: 6px;
height: 100px;
position: relative; /* must be set to the container of the absolute positioned element */
}
.main {
display: flex;
flex-direction: column;
}
.top {
background: #27698D;
border-bottom: 1px solid #2a2a2a;
border-top-right-radius: 6px;
width: 42px;
height: 50px;
padding-left: 14px;
padding-top: 14px;
}
.middle {
background: #27698D;
border-bottom-right-radius: 6px;
width: 42px;
height: 50px;
padding-left: 14px;
padding-top: 16px;
}
.row-celeste {
height: 22px;
background-color: #8CE8FC;
position: absolute; /* this will make your div position calculated respecting its container */
bottom: -19px; /* this will stick it to the bottom */
width: 100%;
z-index: -1;
}
<div class="container-flex">
<div class="left">
<div class="row">
<div class="col-md-7 col-md-offset-1 border-right">
<p class="card-text white-text">Mejorar clima en finanzas</p>
<h4 class="card-subtitle white-text">Ponderación 33%</h4>
</div>
<div class="col-md-4 check-area">
<p class="card-text white-text" id="clicker-calificacion"><i class="fa fa-check text-white" aria-hidden="true"></i> Calificar</p>
</div>
</div>
<div class="row-celeste">
<p class="card-text centered"></p>
</div>
</div>
<section class="main">
<a href="">
<div id="clicker-menu-black" class="col top"><i class="fa fa-bars white-text" aria-hidden="true"></i>
</div>
</a>
<a href="">
<div id="clicker" class="col middle"><i class="fa fa-plus white-text" aria-hidden="true"></i>
</div>
</a>
</section>
</div>

Answer 2

The light blue row doesn't need to be a div. It can be just a blue border
#box {
display: inline-flex;
flex-direction: row;
border-radius: 6px;
overflow: hidden;
}
#left {
background-color: #0073a9;
border-bottom: 10px solid #6aebff; /* Light blue "bar" */
display: flex;
flex-direction: row;
}
#left > * {
padding: 10px 20px;
}
#left > *:not(:first-child) {
border-left: 1px solid black;
}
#right {
background-color: #00688f;
display: flex;
flex-direction: column;
font-size: 22px;
font-weight: bold;
}
#right > * {
flex-grow: 1;
flex-basis: 0;
padding: 5px 10px;
text-align: center;
}
#right > *:not(:first-child) {
border-top: 1px solid black;
}
.centered-container {
display: flex;
direction: row;
justify-content: center;
align-items: center;
}
#ellipsis {
line-height: 30%;
}
* {
color: white;
}
#left {
font-family: sans, "Raleway";
}
<div id="box">
<div id="left">
<div id="title-div" class="centered-container">
<div>
<p><b>Mejorar políticas de liderazgo</b><br>Ponderación 40%</p>
</div>
</div>
<div id="qualify-div" class="centered-container">
✔ Calificar
</div>
</div>
<div id="right">
<div id="ellipsis" class="centered-container">
<div>·<br>·<br>·</div>
</div>
<div class="centered-container">
<div>+</div>
</div>
</div>
</div>

Answer 3

Is this OK?
<style>
.container-flex {
display: flex;
flex-flow: row;
height: 100px;
}
.left {
flex: 1;
background-color: #2C77A5;
padding-top: 2%;
border-top-left-radius: 6px;
height: 100px;
}
.main {
display: flex;
flex-direction: column;
}
.top {
background: #27698D;
border-bottom: 1px solid #2a2a2a;
border-top-right-radius: 6px;
width: 42px;
height: 50px;
padding-left: 14px;
padding-top: 14px;
}
.middle {
background: #27698D;
border-bottom-right-radius: 6px;
width: 42px;
height: 50px;
padding-left: 14px;
padding-top: 16px;
}
.row-celeste {
height: 22%;
background-color: #8CE8FC;
}
.row-celeste {
height: 22%;
background-color: #8CE8FC;
bottom: 0;
position: absolute;
width: 100%;
}
</style>
<div class="container-flex">
<div class="left">
<div class="row">
<div class="col-md-7 col-md-offset-1 border-right">
<p class="card-text white-text">Mejorar clima en finanzas</p>
<h4 class="card-subtitle white-text">Ponderación 33%</h4>
</div>
<div class="col-md-4 check-area">
<p class="card-text white-text" id="clicker-calificacion"><i class="fa fa-check text-white" aria-hidden="true"></i> Calificar</p>
</div>
</div>
<div class="row-celeste">
<p class="card-text centered"></p>
</div>
</div>
<section class="main">
<a href="">
<div id="clicker-menu-black" class="col top"><i class="fa fa-bars white-text" aria-hidden="true"></i>
</div>
</a>
<a href="">
<div id="clicker" class="col middle"><i class="fa fa-plus white-text" aria-hidden="true"></i>
</div>
</a>
</section>
</div>