CSS - Align Buttons in the same line

Question

I would like to align these buttons in the same line. It looks like it is aligning itself according to the text, but I would like the buttons to be aligned according to the bottom of the card, so it would be independent of the length of the text. Thank you for any help. I have included the code snippet as well.

My outcome

Desired outcome

.container3 {
    padding-top: 50px;
    display: flex;
    justify-content: center;
}

.box {
    background-color: white;
    opacity: 0.9;
    width: 300px;
    height:500px;
    margin:20px;
    box-sizing: border-box;
    border-radius: 10px;
    transition: transform 0.5s;
    box-shadow: 2px 2px 20px grey;
    cursor: pointer;
}
.box-image.img1 {
    height:200px;
    background-image: url(images/pamatky.jpg);
    background-size:cover;
    box-sizing: border-box;
    border-radius: 10px;
    margin: 10px;
    
}
.box-image.img2 {
    height:200px;
    background-image: url(images/pyramidy.jpg);
    background-size:cover;
    box-sizing: border-box;
    border-radius: 10px;
    margin: 10px;
}
.box-image.img3 {
    height:200px;
    background-image: url(images/chufe.jpg);
    background-size:cover;
    box-sizing: border-box;
    border-radius: 10px;
    margin: 10px;
}
.box-image.img4 {
    height:200px;
    background-image: url(images/rache.jpg);
    background-size:cover;
    box-sizing: border-box;
    border-radius: 10px;
    margin: 10px;
}
.box:hover {
    transform: scale(1.1);
}

p.box-text {
    color: black;
    padding: 10px;
    text-align: justify;
    font-weight: 500;
    
}
h2 {
    text-align: center;
    font-weight: 900;
}

.button a {
    background-color: white;
    color: black;
    font-size: 15px;
    padding: 15px 20px;
    display: block;
    text-align:center;
    margin: 0px 100px;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
    border-radius: 10px;
    box-shadow: 2px 2px 5px grey;
    bottom: 2px;
}

<div id="container2"> 
<section class="container3">
<div class="box">
<div class="box-image img1"></div>
<h2>Památky</h2>
<p class="box-text">Egypt je země na památky velice bohatá. Pojedeme-li po Nilu od egyptských hranic na sever, můžeme se neustále nechávat okouzlovat novými a novými chrámy, sfingami, pyramidami … . Naše stránky se teprve rozjíždějí. Proto jsme zatím vybrali pouze nejnavštěvovanější památky. Samozřejmě budeme jejich počet průběžně rozšiřovat. Zatím jsou rozděleny do tří oblastí - okolí Káhiry (Gíza, Sakkara a Memfis), okolí Luxoru (starověké Théby neboli Veset) a jižní hranice Egypta (Asuán, Abú Simbel …). S rozšiřováním stránek budeme samozřejmě rozšiřovat i počet oblastí.</p>
<div class="button"><a href="">VÍCE</a></div>
</div>

<div class="box">
<div class="box-image img2"></div>
<h2>Pyramidy</h2>
<p class="box-text">Tři velké jehlany se sfingou v popředí jsou snad nejčastěji používaným symbolem Egypta.Udivující je, že vznikly již v raném počátku egyptské civilizace a státnost, za vlády 4. dynastie. Tyto tři velké pyramidy v Gíze jsou sice nejznámější, avšak v žádném případě jediné. Po celém Egyptě je rozeseto množství méně známých, ale ne méně cenných pyramid. Že tyto monumentální stavby byly postaveny proto, aby chránily věčný spánek faraónů, ví dnes každé malé dítě. Již pět tisíciletí zaměstnávají mysl architektů, matematiků, archeologů, stavitelů, ale i vyznavačů méně exaktních směrů.</p>
<div class="button"><a href="">VÍCE</a></div>
</div>

<div class="box">
<div class="box-image img3"></div>
<h2>Chufevova pyramida</h2>
<p class="box-text">Je známá pod jménem vládce, který ji nechal postavit, faraóna Chufeva, řecky Cheopse. Je to největší dodnes stojící pyramida a na dlouhá tisíciletí největší dílo lidských rukou vůbec. Do roku 1880 byla nejvyšší stavbou na světě, pak ji překonaly věže dómu v Kolíně nad Rýnem a v roce 1889 Eiffelova věž. Se čtvercovou základnou o straně 230 metrů a původní výškou 146 m si naše představivost asi těžko poradí. Fotbalovým fanouškům přiblížíme lépe její velikost, když řekneme, že na její základnu by se vešlo deset fotbalových hřišť.</p>
<div class="button"><a href="">VÍCE</a></div>
</div>

<div class="box">
<div class="box-image img4"></div>
<h2>Rachefova pyramida</h2>
<p class="box-text">Známe ji též pod názvem Chefrenova pyramida. Po vzoru svého otce Chufeva si nechává stavět svoji hrobku i faraón Rachef. Tato pyramida, která je o deset metrů nižší, než byla původní výška Chufevovy pyramidy a o metr nižší než je dnes, působí daleko vyšším dojmem, protože je postavená na místě výše postaveném. Obě jsou však téměř stejně veliké. Rozdíl deseti metrů výšky a dvaceti metrů v jedné straně základny (Rachefova má základnu 210 x 210 m) už na výsledném monumentálním dojmu nic nebere.</p>
<div class="button"><a href="">VÍCE</a></div>
</div>



</div>
</div>
</div>

Answer 1

The idea is to make all the .box elements as flexbox containers with column direction and the last child elements (the .button container) should have margin-top: auto.

You could also improve the accessibility and maintainability of the content by placing the images as regular images elements (and not as backgrounds, since they convey information) using the object-fit property (as you can see I used 4 different images, but they cover the space keeping their aspect ratio.)

.container3 {
  padding-top: 50px;
  display: flex;
  gap    : 20px;
  justify-content: center;
}

.container3 * {
  box-sizing: border-box;
}

.box {
  background-color: white;
  opacity : 0.9;
  width   : 300px;
  border-radius : 10px;
  transition    : transform 0.5s;
  box-shadow    : 2px 2px 20px grey;
  cursor        : pointer;
  display       : flex;
  flex-direction: column;
  
}

.box figure {
  display: block;
  height: 200px;
  margin: 10px;
  padding: 0;
  border-radius: inherit; 
  overflow: hidden;
}

.box img {   
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center center;
}

.box:hover {
    transform: scale(1.1);
}

p.box-text {
    color: black;
    padding: 10px;
    text-align: justify;
    font-weight: 500;
    
}
h2 {
    text-align: center;
    font-weight: 900;
}


.button {
  margin-top: auto;  
  margin-bottom: 30px;
}


.button a {
    background-color: white;
    color: black;
    font-size: 15px;
    padding: 15px 20px;
    display: block;
    text-align:center;
    margin: 0px 100px;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
    border-radius: 10px;
    box-shadow: 2px 2px 5px grey;
    bottom: 2px;
}

<section class="container3">

    <div class="box">
        <figure><img src="http://via.placeholder.com/1000x200" /></figure>
        <h2>Památky</h2>
        <p class="box-text">Egypt je země na památky velice bohatá. Pojedeme-li po Nilu od egyptských hranic na sever, můžeme se neustále nechávat okouzlovat novými a novými chrámy, sfingami, pyramidami … . Naše stránky se teprve rozjíždějí. Proto jsme zatím vybrali pouze nejnavštěvovanější památky. Samozřejmě budeme jejich počet průběžně rozšiřovat. Zatím jsou rozděleny do tří oblastí - okolí Káhiry (Gíza, Sakkara a Memfis), okolí Luxoru (starověké Théby neboli Veset) a jižní hranice Egypta (Asuán, Abú Simbel …). S rozšiřováním stránek budeme samozřejmě rozšiřovat i počet oblastí.</p>
        <div class="button"><a href="">VÍCE</a></div>
    </div>

    <div class="box">
        <figure><img src="http://via.placeholder.com/500x400" /></figure>
        <h2>Pyramidy</h2>
        <p class="box-text">Tři velké jehlany se sfingou v popředí jsou snad nejčastěji používaným symbolem Egypta.Udivující je, že vznikly již v raném počátku egyptské civilizace a státnost, za vlády 4. dynastie. Tyto tři velké pyramidy v Gíze jsou sice nejznámější, avšak v žádném případě jediné. Po celém Egyptě je rozeseto množství méně známých, ale ne méně cenných pyramid. Že tyto monumentální stavby byly postaveny proto, aby chránily věčný spánek faraónů, ví dnes každé malé dítě. Již pět tisíciletí zaměstnávají mysl architektů, matematiků, archeologů, stavitelů, ale i vyznavačů méně exaktních směrů.</p>
        <div class="button"><a href="">VÍCE</a></div>
    </div>

    <div class="box">
        <figure><img src="http://via.placeholder.com/400x300" /></figure>
        <h2>Chufevova pyramida</h2>
        <p class="box-text">Je známá pod jménem vládce, který ji nechal postavit, faraóna Chufeva, řecky Cheopse. Je to největší dodnes stojící pyramida a na dlouhá tisíciletí největší dílo lidských rukou vůbec. Do roku 1880 byla nejvyšší stavbou na světě, pak ji překonaly věže dómu v Kolíně nad Rýnem a v roce 1889 Eiffelova věž. Se čtvercovou základnou o straně 230 metrů a původní výškou 146 m si naše představivost asi těžko poradí. Fotbalovým fanouškům přiblížíme lépe její velikost, když řekneme, že na její základnu by se vešlo deset fotbalových hřišť.</p>
        <div class="button"><a href="">VÍCE</a></div>
    </div>

    <div class="box">
        <figure><img src="http://via.placeholder.com/500x300" /></figure>
        <h2>Rachefova pyramida</h2>
        <p class="box-text">Známe ji též pod názvem Chefrenova pyramida. Po vzoru svého otce Chufeva si nechává stavět svoji hrobku i faraón Rachef. Tato pyramida, která je o deset metrů nižší, než byla původní výška Chufevovy pyramidy a o metr nižší než je dnes, působí daleko vyšším dojmem, protože je postavená na místě výše postaveném. Obě jsou však téměř stejně veliké. Rozdíl deseti metrů výšky a dvaceti metrů v jedné straně základny (Rachefova má základnu 210 x 210 m) už na výsledném monumentálním dojmu nic nebere.</p>
        <div class="button"><a href="">VÍCE</a></div>
    </div>

</section>

Answer 2

They react this way because they're dependent from the text's length. You can place the buttons in your .box with position: absolute. Put them in a .container, give width: 100% to the .container, then text-align: center (so the button will remain centered) and the coordinates with position: absolute. Give left: 0 (so the .container remains centered) and the distance from the bottom you want. Obviously give position: relative to your .box and everything should works properly.

Answer 3

You can try this :

.box {
    position : relative;
}
  

.button {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}