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>