[html]
<style>
div.questionnaire {
display: flex;
flex-direction: column;
background-color: rgb(var(--canvas-secondary));
border: 3px solid rgb(var(--accent));
border-radius: 8px;
box-sizing: border-box;
margin: 0 40px !important;
padding: 15px 30px;
gap: 15px;
}

div.questionnaire ttl {
font: 500 22px Comic Sans MS;
display: block;
text-align: center;
}

div.questionnaire que {
font: 400 15px Comic Sans MS;
display: block;
width: fit-content;
padding: 3px 10px;
border-bottom: 1px dashed #8d8d8d;
}

div.questionnaire ans {
display: block;
margin-bottom: 15px;
white-space: pre-wrap;
}

</style>

<div class='questionnaire'>
<ttl>ЗАГОЛОВОК</ttl>

<que>1. вопрос любой длины но лучше в одну строку</que>
<ans>ответ любой длины, неважно в сколько строк.</ans>

<que>1. вопрос любой длины но лучше в одну строку</que>
<ans>ответ любой длины, неважно в сколько строк.
работает перенос по энтеру</ans>

<que>1. вопрос любой длины но лучше в одну строку</que>
<ans>ответ любой длины, неважно в сколько строк.</ans>

</div>

[/html]