T.Kiril T.Kiril - 26 days ago 8
CSS Question

Aligning bottoms of divs to same level

Is there any way to get comment divs bottom to the same level of buttons bottom line?

This is how it now works.
Quick jsfiddle

.button_div {
width: 54px;
height: 20px;
float: left;
}

.comments {
width: 320px;
margin-right: -100px;
height: 340px;
background-color: #818181;
float: left;
}

.comment_cont {
float: right;
}


And this is how I want it to look.
Accomplished with negative top margin, but this approach don't work for me, because height of comment div may change.

Answer

You can use display: flex with align-items: flex-end on parent element.

.comments {
  width: 320px;
  height: 340px;
  background-color: #818181;
}
.comment_cont {
  float: right;
  display: flex;
  align-items: flex-end;
}
<div class="comment_cont">
  <div class="button_div">
    <button>Button</button>
  </div>
  <div class="comments"></div>
</div>