垂直对齐动画 div

Question

I have three buttons that set different output text when clicked and I'm trying to use W3.CSS animations to "slide" the text in and out. I almost have it working using two separate divs but cannot get them to align correctly under the buttons; the div for every other button click displays lower than the previous one.

I've tried float , vertical-align: top , display: inline-block , and a few other things so far but either used them incorrectly or something else (a conflicting parent div style, maybe?) is causing problems.

Image with a button's output displaying right under the buttons (as it should)

Image with the next button's output displaying lower than the first

I trimmed code that wasn't relevant while also leaving what was necessary to show the div structure for this particular section.

• HTML: The divs with IDs old_output and new_output are what I'm trying to align below the buttons
• CSS: div.button_output_container and div.button_output are used for the output divs and their container
• JS: Handles button clicks, decides which animation should be used, and sets the output text (aside from demonstrating the issue I think it's mostly irrelevant)

JSFiddle link

Answer 1

I am not sure I totally understand your alignment requirement, but if you just want your divs to render on the same height, you could opt for position:absolute like so:

div.button_output_container {
  position: relative; 
}

div.button_output {
    margin: 16px 24px;
    width: 450px;
    position: absolute; 
}