In my flex container, I have two boxes arranged side by side (collapsing into one column on smaller screens).
I've ensured that these boxes have the same height when displayed together, as shown in the image below: https://i.sstatic.net/ZjsfW.png
Now, my goal is to position the EDIT button at the bottom of both boxes. This means that only the EDIT button for the box with less content should need to be repositioned.
I've looked into using absolute positioning, but it's not ideal as one box won't require it. If I apply absolute positioning to both EDIT buttons, the right box will end up with less overall height due to not counting the button.
I've also attempted to manipulate the layout using flexbox, but I'd prefer not to set the boxes themselves as display:flex.
There might be a solution involving jQuery, although I've come across vague suggestions like "You can do that with jQuery!" without clear guidance on implementation.
#parent {
flex-flow: row wrap;
display: flex;
align-items: stretch;
}
.box {
margin: 10px;
padding: 15px;
flex: 0 1 calc(50% - 50px);
}
.box:last-of-type {
background-color: green;
}
.box:first-of-type {
background-color: red;
}
.cool-form {
display: flex;
flex-direction: column;
}
.button-container {
display: block;
margin-left: 5px;
margin-top: auto;
align-self: center;
}
.button {
background-color: white;
display: inline-block;
width: 120px;
height: 48px;
line-height: 48px;
border: 1px solid black;
text-align: center;
cursor: pointer;
}<div id="parent">
<div class="box">
<form class="cool-form">
<h1>Box on left</h1>
<p>This is a shorter box</p>
<span class="button-container">
<span class="button">EDIT</span>
</span>
</form>
</div>
<div class="box">
<form class="cool-form">
<h1>Box on right</h1>
<p>This is</p>
<p>a</p>
<p>bigger</p>
<p>waaay bigger</p>
<p>Box</p>
<span class="button-container">
<span class="button">EDIT</span>
</span>
</form>
</div>
</div>