Попытка иметь один div слайд вниз из-за другого div на hover

Question

Я пытаюсь иметь div с некоторым текстом, который скользит вниз по другому div с большим количеством текста, когда он зависает. В настоящее время я испытываю трудности с этим. Если хорошее решение включает JQuery, могли бы вы, ребята ELI5 (я никогда раньше не использовал JQuery)? Текущая попытка, изложенная ниже, лежит в основе того, что я ищу. Я просто хочу, чтобы на анимации появилась анимация, показывающая, что дополнительный текст скользит вниз, а не внезапно появляется.

.container { 
 
    font-size: 2em; 
 
    box-shadow: 0px 0px 3px 1px black; 
 
    margin: 20px; 
 
    padding: 20px; 
 
    background-color: #E7E7EF; 
 
    display: block; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    border-radius: 10px; 
 
    width: 80%; 
 
    margin-top: 50px; 
 
    -webkit-transition: 0.5s; 
 
    transition: 0.5s; 
 
} 
 
.below { 
 
    display: none; 
 
    -webkit-transition-duration: 0.5s; 
 
    transition-duration: 0.5s; 
 
} 
 
.container:hover .below { 
 
    display: block; 
 
}

<div class="container"> 
 
    <div class="above"> 
 
    <p> 
 
     Some text in the above div 
 
    </p> 
 
    </div> 
 
    <div class="below"> 
 
    <p> 
 
     More text that slides down from under the above div 
 
    </p> 
 
    </div> 
 
</div>

Answer 1

Используйте overflow вместо display https://jsfiddle.net/yb6vct8a/1/

.container { 
    font-size: 2em; 
    box-shadow: 0px 0px 3px 1px black; 
    margin: 20px; 
    padding: 20px; 
    background-color: #E7E7EF; 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    border-radius: 10px; 
    width: 80%; 
    margin-top: 50px; 
    -webkit-transition: max-height 0.8s; 
    -moz-transition: max-height 0.8s; 
    transition: max-height 0.8s; 


} 

.below { 
    max-height: 0; 
    overflow: hidden; 

    /* Set our transitions up. */ 
    -webkit-transition: max-height 0.8s; 
    -moz-transition: max-height 0.8s; 
    transition: max-height 0.8s; 
} 

.container:hover .below { 

    max-height: 200px; 


}