0

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 &#10230;</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 &#10230;</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 &#10230;</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.

Alex Dan
  • 51
  • 3

1 Answers1

1

: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 &#10230;</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 &#10230;</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 &#10230;</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
Emre
  • 723
  • 6
  • 14