I'm trying to place the red div just at the bottom of the green one, without affecting the other elements that are precisely inside this green div (Home, Reports, My Profile), but I can't do it, any ideas here is the code :
.menu{
background-color: green;
border-right: 1px rgb(218, 218, 218) solid;
border-bottom: 1px rgb(218, 218, 218) solid;
width: 200px;
height: 95vh;
}
.menu_opts{
height: 70px;
width: 180px;
display: flex;
align-items: center;
margin-bottom: 15px;
padding: 10px;
color: #a5a5a59f;
font-size: 16px;
background-color: blue;
/* transition-duration: 300ms; */
}
<div class="row">
<div class="menu">
<div class="menu_opts" id="home">
<li class="bi bi-house-fill"> Home </li>
</div>
<div class="menu_opts" id="reports">
<li class="bi bi-megaphone-fill"> Reportes </li>
</div>
<div class="menu_opts" id="profile">
<li class="bi bi-people-fill"> Mi Perfil </li>
</div>
<div class="sb">
<div class="menu_opts" id="log_out">
<li class="bi bi-box-arrow-left"> Salir </li>
</div>
</div>
</div>
</div>
Done!, I managed to solve it in the following way:
Add a
margin-top: auto
pointer to the .menu (which would be the green div) with the .sd (which would be the red div) and adding to the .menu :Here the result: