父 div 底部的跨度

Question

I have a flex container in which I have two boxes which are side by side (and collapse in one column when the screen is too small).

Now, when boxes are side by side, I've set that they have the same height, like in the following image.

Now, what I want to achieve is to put the EDIT button of both boxes at the bottom (this means that only the EDIT button of the box with less content will need to move).

I've searched, but the solution are to use position absolute, because one of the two boxes won't need it, and if I put position absolute on both EDIT button, the box on the right will have less height because it won't count the EDIT button anymore.

I tried to play with flex, but I rather not set the boxes as display flex.

There may be some solution with Jquery, I've read something about it, but it was just something like "You could achieve that with Jquery!" but.. I honestly don't know how.

 #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>

Answer 1

Adding flexbox to these divs (using flex-direction:column ) seems minimally invasive (which was, perhaps a concern).

.box {
  display: flex;
  flex-direction: column;
}

Then you can give the button container margin-top:auto and it's auomatically pushed to the bottom.

Then it's just a matter of aligning it horizontally/centrally

.button-container {
  margin-top: auto;
  align-self: center;
}

 #parent { flex-flow: row wrap; display: flex; align-items: stretch; } .box { margin: 10px; padding: 15px; flex: 0 1 calc(50% - 50px); display: flex; flex-direction: column; } .box:last-of-type { background-color: green; } .box:first-of-type { background-color: red; } .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"> <h1>Box on left</h1> <p>This is a shorter box</p> <span class="button-container"> <span class="button">EDIT</span> </span> </div> <div class="box"> <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> </div> </div>