Denis Minimal

Если вдруг кому-нибудь понадобится

add_filter( 'woocommerce_redirect_single_search_result', '__return_false' );

Родительскому блоку задаешь: display: flex; flex-direction: column. Тексту, который должен быть приклеен к низу: margin-top: auto

Инициализируй стор в index.js и оберни App в провайдер и будет у тебя доступ к стору из App

ReactDOM.render( <Provider store={store}><App /></Provider> , document.getElementById('root'));

Оберни все элементы с классом language в один контейнер с классом container и в css укажи ему display: flex

Желательно подключать скрипты перед </body>, но если очень хочется подключать в head, то сделай это так
<script src="script.js" defer></script>

Предложу такую структуру

<обертка>
    <вопрос>
        <аватар></аватар>
        <обертка текстового блока></обертка текстового блока>
    </вопрос>
    <ответ>
        <аватар></аватар>
        <обертка текстового блока></обертка текстового блока>
    </ответ>
    <ответ>
        <аватар></аватар>
        <обертка текстового блока></обертка текстового блока>
    </ответ>
    <ответ>
        <аватар></аватар>
        <обертка текстового блока></обертка текстового блока>
    </ответ>
</обертка>

Стрелки и линии делаются с помощью псевдоэлементов :before и :after

.ответ .аватар:before {

}
.ответ .аватар:after {

}

Надеюсь это тебе поможет. Успехов

Я бы создал какой-нибудь дата-атрибут у кнопки с помощью которой мы будем вызывать модальное окно, в котором будет храниться наш заголовок, например, data-card="Карточка 1" data-card="Карточка 2".
Вот вариант на Jquery

$('.button[data-card]').click(function () {
     let title = $(this).attr('data-card'); //Достаем значение дата атрибута
     $('.form .title').html(title); //Вставляем его в нам заголовок формы
     $('input[name=formData]').val(title); //Также вставляем значение дата атрибута в скрытый инпут, для передачи в обработчик формы
      //И только потом должно происходить открытие модального окна
});