анимация при увеличении блока div (transition)

Не получается анимировать div при увеличении его высоты (высота зависит от содержимого, заранее не известного)

<div class="profile-information box">
<div class="information" id="information">
    <p class="p-status">Статус:</p><input id="status" type="text" maxlength="140" placeholder="Изменить статус" value="Типо вот такой вот статус, ыы)">
    <p>День рождения: 03.03.2003</p>
    <p>Город: Санкт-Петербург</p>
</div>

<div class="big-information" id="big-information" style="display: none;">
    <p>Родной город: Москва</p>
    <p>Языки: Русский, Українська, English</p>
    <p>Семейное положение: Все сложно</p>
    <p>Пол: Мужской</p>
    <p>Телефон: +00000000000</p>
</div>

<button id="open-information" onclick="(document.getElementById('big-information').style.display='block'), (document.getElementById('close-information').style.display='block'), (document.getElementById('open-information').style.display='none')">Показать информацию полностью</button>
<button id="close-information" style="display: none;" onclick="(document.getElementById('big-information').style.display='none'), (document.getElementById('close-information').style.display='none'), (document.getElementById('open-information').style.display='block')">Скрыть дополнительную информацию</button>
</div>
.box { position: relative; padding: 15px; border-radius: 40px; background: rgba(0, 0, 0, 0.3); margin: 0 0 10px 0; transition: background 0.1s; }

.profile-information { padding: 20px; }

.information { margin: 0 0 10px 0; }

.p-status { display: inline-block; float: left; }

#status { width: 290px; padding: 0 0 0 5px; color: #FFF; background: rgba(0, 0, 0, 0); border: 0; outline: 0; cursor: pointer; }

#status:focus { border-right: 1px solid #FFF; }

.big-information { margin: 0 0 10px 0; }

#open-information { width: 100%; color: skyblue; background: rgba(0, 0, 0, 0); border: 0; outline: 0; cursor: pointer; transition: 0.3s color; }

#close-information { width: 100%; color: skyblue; background: rgba(0, 0, 0, 0); border: 0; outline: 0; cursor: pointer; transition: 0.3s color; }

#open-information:hover { color: #FFF; }

#close-information:hover { color: #FFF; }