Добрых времени суток, помоги, пожалуйста, сверстать такой список, проблема возникает с линиями.
Вот моя попытка:
.description-list {
width: 100%;
display: flex;
flex-direction: column;
max-width: 550px;
}
.description-list__item {
font-weight: 500;
display: flex;
align-items: center;
}
.description-list__subtitle {
width: 100%;
}
.description-list__line {
background: #f5f5f5;
border-radius: 2px;
height: 3px;
display: block;
min-width: 180px;
margin: 0 20px;
}
.description-list__description {
width: 100%;
}
<ul class="description-list">
<li class="description-list__item">
<span class="description-list__subtitle">Дата основания</span>
<span class="description-list__line"></span>
<div class="description-list__description">2011</div>
</li>
<li class="description-list__item">
<span class="description-list__subtitle">Реставрирован</span>
<span class="description-list__line"></span>
<div class="description-list__description">2013</div>
</li>
<li class="description-list__item">
<span class="description-list__subtitle">Расположение</span>
<span class="description-list__line"></span>
<div class="description-list__description">Cebesoy Cad. No.28</div>
</li>
<li class="description-list__item">
<span class="description-list__subtitle">Площадь</span>
<span class="description-list__line"></span>
<div class="description-list__description">4000 м2</div>
</li>
</ul>
Вот какой результат должен быть в итоге: