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');    
let togs = document.querySelectorAll('.answer-subpage')
    for (let i = 0; i < buts.length; i++) {
        buts[i].addEventListener('click', Addclass(i));
        
    }
function Addclass (i) {

    togs[i].classList.toggle("active")
}