How do I make it so that regardless of the content inside the box the button "VEZI MAI MULT ->" sticks to the button of the box? I have tried many methods that sadly I did not save but here is where I am now:
:root{
--fontSansSerif: 'Inter';
--fontSerif: 'DM Serif Display';
--heightDropdown: 250px;
--bluePigment: #333895;
--midnightBlue: #1B1164;
--aliceBlue: #E4EBF8;
--lightSteelBlue: #B0C5E3;
--darkSteelBlue: #86ADE3;
}
.oferta-educationala h1{
margin-bottom: 20px;
}
.oferta{
display: flex;
flex-direction: column;
border:solid;
color: var(--midnightBlue);
}
.oferta-text{
padding: 20px 20px 0px 20px;
}
.toate-ofertele-ed{
display: flex;
}<div class="oferta-educationala">
<h1>Ofertă Educațională</h1>
<div style="display:flex;">
<div class="toate-ofertele-ed">
<div class="oferta">
<div class="oferta-text">
<p>PROFIL REAL</p>
<ul>
<li>Matematică-Informatică Bilingv<span>26 locuri</span></li>
<li>Matematică-Informatică <span>26 locuri</span></li>
<li>Ştiinţe ale naturii <span>52 locuri</span></li>
</ul>
</div>
<div style=
"display: flex;
align-content: flex-end;
justify-content: flex-end;">
<button>VEZI MAI MULT ⟶</button>
</div>
</div>
<div class="oferta">
<div class="oferta-text">
<p>PROFIL UMAN</p>
<ul>
<li>Filologie bilingv <span>26 locuri</span></li>
<li>Filologie <span>26 locuri</span></li>
<li>Ştiinţe sociale <span>52 locuri</span></li>
</ul>
</div>
<div style=
"display: flex;
align-content: flex-end;
justify-content: flex-end;
">
<button>VEZI MAI MULT ⟶</button>
</div>
</div>
<div class="oferta">
<div class="oferta-text">
<p>PROFIL UMAN</p>
<ul>
<li>Filologie bilingv <span>26 locuri</span></li>
<li>Filologie <span>26 locuri</span></li>
<li>Ştiinţe sociale <span>52 locuri</span></li>
</ul>
</div>
<div style=
"display: flex;
align-content: flex-end;
justify-content: flex-end;
">
<button>VEZI MAI MULT ⟶</button>
</div>
</div>
</div>
</div>
</div>I have also tried separating the text and the button into two divs and then setting the vertical-align of the button div to button but no matter of how I implement it it does not work. Any input is appreciated.
>Solution :
:root{
--fontSansSerif: 'Inter';
--fontSerif: 'DM Serif Display';
--heightDropdown: 250px;
--bluePigment: #333895;
--midnightBlue: #1B1164;
--aliceBlue: #E4EBF8;
--lightSteelBlue: #B0C5E3;
--darkSteelBlue: #86ADE3;
}
.oferta-educationala h1{
margin-bottom: 20px;
}
.oferta{
display: flex;
flex-direction: column;
justify-content: space-between;
height: 300px; /*optional*/
border:solid;
color: var(--midnightBlue);
}
.oferta-text{
padding: 20px 20px 0px 20px;
}
.toate-ofertele-ed{
display: flex;
}<div class="oferta-educationala">
<h1>Ofertă Educațională</h1>
<div style="display:flex;">
<div class="toate-ofertele-ed">
<div class="oferta">
<div class="oferta-text">
<p>PROFIL REAL</p>
<ul>
<li>Matematică-Informatică Bilingv<span>26 locuri</span></li>
<li>Matematică-Informatică <span>26 locuri</span></li>
<li>Ştiinţe ale naturii <span>52 locuri</span></li>
</ul>
</div>
<div style="justify-content: flex-end;display: flex;">
<button>VEZI MAI MULT ⟶</button>
</div>
</div>
<div class="oferta">
<div class="oferta-text">
<p>PROFIL UMAN</p>
<ul>
<li>Filologie bilingv <span>26 locuri</span></li>
<li>Filologie <span>26 locuri</span></li>
<li>Ştiinţe sociale <span>52 locuri</span></li>
</ul>
</div>
<div style="justify-content: flex-end;display: flex;">
<button>VEZI MAI MULT ⟶</button>
</div>
</div>
<div class="oferta">
<div class="oferta-text">
<p>PROFIL UMAN</p>
<ul>
<li>Filologie bilingv <span>26 locuri</span></li>
<li>Filologie <span>26 locuri</span></li>
<li>Ştiinţe sociale <span>52 locuri</span></li>
</ul>
</div>
<div style="justify-content: flex-end;display: flex;">
<button>VEZI MAI MULT ⟶</button>
</div>
</div>
</div>
</div>
</div>