Как предотвратить пересечение вертикальной линией пунктов списка (чистый CSS) ⇐ Html

[Anonymous]

Я настроил пример ниже. Как видите, вертикальная линия проходит за верхнюю и нижнюю точки списка. Это часть гораздо более сложного компонента React, и разметку изменить нельзя.
Есть ли способ гарантировать, что строка не выйдет за пределы начальной и конечной точек маркера, даже если текст описания переносится на меньшие экраны?
Я понимаю, что это можно решить с помощью useEffect для настройки макета, но я надеюсь, что есть чистый CSS решение.
Цените свое время!

Код: Выделить всё

*, :after, :before {
box-sizing: border-box;
border: 0 solid;
margin: 0;
padding: 0
}
.container {
position: relative;
display: flex;
justify-content: center;
width: 600px;
padding: 1rem 1.75rem;
margin: 0 auto
}
.container:before {
content: '';
position: absolute;
width: 1px;
height: 82.5%;
left: 0.325rem;
top: 8.75%;
background-color: #101010
}
ul {
list-style: none;
padding: 0;
display: flex;
flex-direction: column;
gap: 1.5rem;
max-width: 600px;
}
li {
display: flex;
justify-content: center;
align-items: center
}
button {
background: none;
outline: none;
border: 0;
width: 100%;
display: grid;
align-items: center;
grid-template-columns: 1fr 1fr;
}
.title {
position: relative;
display: inline-flex;
align-items: center;
cursor: pointer;
}
.title:before {
content: '';
position: absolute;
width: 1.5rem;
height: 0.5rem;
left: -1.5rem;
top: 50%;
transform: translate(-50%, -50%);
background-color: tomato;
}
.desc {
text-align: left;
}< /code>

[list]
[*]

Title 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua


[*]

Title 2
Lorem ipsum dolor sit amet


[*]

Title 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt


[*]

Title 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit

[*]

Title 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

[/list]

Подробнее здесь: https://stackoverflow.com/questions/797 ... s-pure-css