Как сделать плавное появление и пропадание елемента?

Question

Макс @max10110

Как сделать плавное появление и пропадание елемента?

Есть такая разметка

<div class="card-wrp">
                <div class="card-cont">
                    <p>ЗДЕСЬ ДОЛЖЕН БЫТЬ ВОПРОС</p>
                    <button>ПОСМОТРЕТЬ ОТВЕТ <img src="../assets/img/caret.svg" alt="caret"></button>
                </div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Adipiscing diam donec arcu sagittis, metus, malesuada. Scelerisque 
                    quis id eros, lobortis. Et nec augue vestibulum rhoncus nunc neque, purus enim sed. Sagittis sed habitant ut accumsan, vivamus varius gravida id. 
                    Ac sed dolor tortor in pretium. Tempor bibendum sed massa vulputate consectetur enim sodales. Vitae metus urna, nec, natoque mattis sed vel purus parturient. 
                    Ultrices at vivamus interdum congue non id ultricies eget. Enim bibendum dignissim ut purus purus nisl, laoreet non. Ut est metus elit arcu arcu vitae. Volutpat 
                    in arcu, velit venenatis. Odio orci lacinia aliquam dictumst tempus. Sagittis eu, scelerisque tristique diam tincidunt quis lorem viverra. In condimentum volutpat 
                    sed consequat varius donec. Duis dolor posuere sapien duis velit facilisi non integer id. Amet est sed turpis mauris nec.</p>
            </div>

Есть такой CSS

.card-wrp{
    max-width: 1156px;
    margin: 0 auto;
    background: #FFFFFF;
    -webkit-box-shadow: 4px 4px 10px rgba(212,217,208,0.5),-4px -4px 10px rgba(212,217,208,0.5);
    box-shadow: 4px 4px 10px rgba(212,217,208,0.5),-4px -4px 10px rgba(212,217,208,0.5);
    border-radius: 15px;
    -webkit-transition: 0.25s all;
    transition: 0.25s all;
}
.card-cont{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 30px;
}
.card-wrp p:first-child{
    font-weight: bold;
    font-size: 16px;
    color: rgba(42,61,66,0.8);
    padding-top: 42px;
    padding-left: 30px;
    padding-bottom: 42px;
}
.card-wrp button{
    position: relative;
    overflow: hidden;
    -webkit-transition: background-position 275ms ease;
    transition: background-position 275ms ease;
    background-size: 200% 100%;
    background-position: 100%;
}
.card-wrp button img{
    margin-left: 8px;
}
.card-wrp p:nth-child(2){
    font-size: 16px;
    color: rgba(42,61,66,0.8);
    margin-top: 20px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 42px;
    -webkit-transition: 0.25s all;
    transition: 0.25s all;
    margin-bottom: 30px;
    opacity: 0;
    visibility: hidden;
    display: none;
}

При клике на кнопу должен повяляться этот блок .card-wrp p:nth-child(2) как это сделать плавно, т.к. transition не работает с display, а opacity не подходит т.к. мессто он все еще будет занимать.
Можно использовать jquery