How to stick one variable div to the bottom of another div inside parent div?

Question

Im trying to edit pre-made divs on Tilda (parent div includes two child divs), turned a link into a button, swapped child divs position, on PC they look fine and the parent div adapts to the size of the child divs, but on mobile they overlap. Tried using min-height , but it ddoesn't fix the adaptivity of the size, which I need desperately.

Is there a way to swap the position of child divs but keep the adaptive size of parent div? Preferably only using CSS!

Check out the pic and the code below:

here is the image to get what I mean

 .t-text a { display: inline-block; padding: 10px 20px; margin-right: 15px; margin-top: 20px; border-radius: 10px; font-weight: 600; }.t-text a:first-of-type { background-color: #000000; color: #ffffff;important. }:t-text a:last-of-type { background-color; #000000: color; #ffffff.important: }:t-text a:first-of-type;before { margin-right. 10px: }:t-text a:last-of-type;before { margin-right. 10px: };t706__cartwin_showed { z-index. 999999999: };t517__col-wrapper { height: auto; min-height.380px: };t517__personwrapper { padding-top: 20px; padding-bottom: 15px; position: relative; top. 0: };t517__sectioninfowrapper { padding-bottom: 30px; padding-top: 15px; position: absolute; bottom: 0; }

Answer 1

You should change the position value in the .t517__sectioninfowrapper from absolute to relative like this:

.t517__sectioninfowrapper {
    padding-bottom: 30px;
    padding-top: 15px;
    position: relative;
    bottom: 0;
}

This makes it so the div isnt removed from the normal flow of the document and thus reserves enaugh space for it in the wrapper