CSS

Приветствую всех!
Подскажите пожалуйста, как можно из этого кода сделать:
1) Плавное открытие и закрытие.
2) После закрытия чтоб страница поднималась вместе с закрывающемся спойлером до начала его открытия.

<div class="ba-testimonial__body">

Спойлер — это раскрытие интриги, влияющее на восприятие сюжета книги или фильма.

</br>

<div class="ba-testimonial__more" id="timore01">

Например, в детективах спойлером является имя убийцы. Чтобы не портить удовольствие от предстоящего чтения или просмотра фильма, текст спойлера прячут, оставляя возможность его просмотреть тем, кто хочет узнать подробности сюжета.

</div>

<button class="ba-extra-text ba-testimonial__toggle" onclick="document.getElementById('timore01').classList.toggle('open')" aria-label="Читать далее" data-more-text="Читать далее" data-less-text="Свернуть"></button>

</div>

Если вам не нравится соискатель на собеседовании и его нужно гарантированно завалить, дайте ему следующее задание:

Дано:

<div style="overflow-x:scroll;">

<div style="position: relative; width:3000px; height:100px; background:green; ">

<div style="position:absolute; width:200px; height:200px; background:red; top:10px; left:10px "></div>

</div>

</div>

Требуется: понять какого лешего тут появляется вертикальная прокрутка?

Нужно сделать как на картинке ниже (горизонтальная прокрутка должна остаться, красный блок поверх всего, красный скролится горизонтально вместе с зеленым):