JSFiddle - React, Tailwind, and code Playground

HTML

<div class="answers-container">
                    <div class="answer-page" > Работаете ли вы по 249 фз?
                        <div class="answer-subpage">
                            Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Однажды, скатился свою прямо переулка маленький над рукопись! Проектах родного ее наш вопрос, использовало о страну вскоре раз рекламных продолжил!
                        </div>
                    </div>
                    <div class="answer-page" > Работаете ли вы по 249 фз?
                        <div class="answer-subpage">
                            Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Однажды, скатился свою прямо переулка маленький над рукопись! Проектах родного ее наш вопрос, использовало о страну вскоре раз рекламных продолжил!
                        </div>
                    </div>
            </div>

CSS

.answers-container {
height: 700px;
width: 100%;
display: flex;
flex-direction: column;
}
.answer-page {
    transition: 1s;
    cursor: pointer;
    text-transform: uppercase;
    color:  #F7654A;
    font-size: 24px;
}
.answer-subpage {
    height: 0px;
    transition: 1s;
    opacity: 0;
    visibility: hidden;
    position: relative;
    left: -20px;
    top: 20px;
    font-size: 16px;
    color: gray;
    max-width: 650px;
}
.active {
    height: 100px;
    opacity: 1;
    transition: 1s;
    visibility: visible;
}

JavaScript

let buts = document.querySelectorAll('.answer-page');    

    for (let i = 0; i < buts.length; i++) {
        buts[i].addEventListener('click', Addclass);
        
    }
function Addclass (e) {
		const element = e.target;
    const subpageElement = element.children[0];
    if (!subpageElement) {
    	return;
    }

    subpageElement.classList.toggle("active")
}