Product landing page. Help to align buttons from the bottom level

1

Hi, please explain how i can align all the buttons in the same line, from the bottom of the border?

.offers {
 position: relative;
 top: 180px;
 display: inline-block;
 left: 85px;
font-family: Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif;
}
.headers1 {
   font-size: 30px;
   margin: 0px;
   background-color: #909090;
   padding: 15px 0 15px 0;
   width: 99.9%;
}
.headers2 {
   font-size: 25px;
   margin-top: 10px;
}
.paragraph {
   font-size: 18px;
   margin: -30px 10px 10px 5px;
}
.button2 {
   padding: 10px 10px 10px 10px;
   background-color: #f2a51a;
   border: none;
   font-weight: bold;
}

buttons
buttons1031×413 54.8 KB

link: https://codepen.io/SimonasZ/pen/wvabOXG?editors=1100

2

flexbox - align-self: flex-end

3

@ShAfi Except flexbox is not being used.

@s.zilevicius Don’t use positioning to manually place things on the page. Don’t push everything into place using margins. No need for floats, they are a hacky, old (broken) way of doing layout. Use the normal document flow and something like flexbox.

Honestly, there are many more pressing issues with that page besides where the buttons are. I would strongly suggest spending some time learning more about CSS layout.


https://www.youtube.com/results?search_query=CSS+layout

4

@lasjorg Thanx for pointing out my problems. Will look into this flexbox and will rewrite this code.