CSS для макета из двух столбцов с вопросами и параметрами, но параметры выглядят неровными ⇐ CSS

[Anonymous]

Я создаю приложение Angular, используя Material, с макетом вкладок, в котором я создал анкету из двух столбцов с вопросами и опциями под ними, но эти параметры выглядят неровными; Я хочу, чтобы они выглядели вертикально выровненными. Проблема в том, что некоторые опции очень длинные, и я боюсь, что их можно пропустить при перетасовке. Кроме того, это некрасиво для зрения. См. изображение ниже:


Я пробовал использовать mat-tile-list и другие приемы CSS, но, похоже, ничего не работает, в конечном итоге они выравниваются бок о бок и имеют неровные края. Можете ли вы подтолкнуть меня в правильном направлении?
Это то, что я пробовал до сих пор:
CSS-код:
.grid-container {
margin-top: 40px;
display: flex;
flex-wrap: wrap;
gap: 20px; /* Adjust as needed */
position: relative;
overflow: auto;
}

.grid-column {
flex: 1 1 45%; /* Adjust the width of the columns as needed */
display: flex;
flex-direction: column;
/* position: absolute; */
}

.question {
font-weight: bold;
}

.options {
display: flex;
flex-direction: column;
gap: 5px; /* Adjust as needed */
}


Код Angular HTML:





{{ i + 1 }}. {{ question.question }}



{{ option.option }}








Вот весь HTML-компонент:

Needs Profile

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
orci enim rutrum enim, vel tempor sapien arcu a tellus.





Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
orci enim rutrum enim, vel tempor sapien arcu a tellus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
orci enim rutrum enim, vel tempor sapien arcu a tellus.







{{ i + 1 }}. {{ question.question }}



{{ option.option }}









Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
orci enim rutrum enim, vel tempor sapien arcu a tellus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
orci enim rutrum enim, vel tempor sapien arcu a tellus.









Подробнее здесь: https://stackoverflow.com/questions/783 ... look-jagge