<div class="wrap">
<div class="item">
<div class="left">Название</div>
<div class="divider"></div>
<div class="right">999999999</div>
</div>
<div class="item">
<div class="left">Название</div>
<div class="divider"></div>
<div class="right">Бобр курва</div>
</div>
<div class="item">
<div class="left">Название</div>
<div class="divider"></div>
<div class="right">1</div>
</div>
<div class="item">
<div class="left">Название</div>
<div class="divider"></div>
<div class="right">000</div>
</div>
</div>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: sans-serif;
color: white;
}
body {
display: flex;
width: 100%;
height: 100vh;
align-items: center;
justify-content: center;
}
.wrap {
display: flex;
flex-direction: column;
width: 300px;
background-color: tomato;
padding: 32px;
gap: 32px;
}
.item {
display: flex;
justify-content: space-between;
}
.divider {
display: flex;
width: 100%;
min-height: 100%;
border-bottom: 1px dotted white;
}
.left,
.right {
white-space: nowrap;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.