JSFiddle - React, Tailwind, and code Playground
HTML
<ul>
<li class="item">
<div class="item-text-container is-left">
<span class="item-text">
Первая
</span>
</div>
<div class="item-text-container is-right">
<span class="item-text">
строка
</span>
</div>
</li>
<li class="item">
<div class="item-text-container is-left">
<span class="item-text">
Имя и отчество
</span>
</div>
<div class="item-text-container is-right">
<span class="item-text">
Станислава Владимировна
</span>
</div>
</li>
<li class="item">
<div class="item-text-container is-left">
<span class="item-text">
Номер полиса выданного
</span>
</div>
<div class="item-text-container is-right">
<span class="item-text">
1213223
</span>
</div>
</li>
</ul>
SCSS
$bg-color: lightgreen;
$max-text-width: 160px;
ul {
max-width: 600px;
list-style-type: none;
padding: 10px;
background-color: $bg-color;
}
.item {
display: flex;
justify-content: space-between;
align-items: flex-end;
position: relative;
& + & {
margin-top: 10px;
}
&::before {
position: absolute;
width: 100%;
bottom: 4px;
border-bottom: 1px dashed;
content: '';
}
}
.item-text-container {
position: relative;
z-index: 2;
max-width: $max-text-width;
&.is-right {
text-align: right;
}
}
.item-text {
background-color: $bg-color;
}