<div class="container">
<div class="item">
<div class="item__content">
Lorem ipsum dolor sit
</div>
<div class="item__dotted"></div>
<div class="item__btn">
<button>Копка</button>
</div>
</div>
<div class="item">
<div class="item__content">
Lorem ipsum dolor sit amet
</div>
<div class="item__dotted"></div>
<div class="item__btn">
<button>Копка</button>
</div>
</div>
<div class="item">
<div class="item__content">
Fuga natus rem, est doloribus fugiat inventore accusantium exercitationem harum magni mollitia?
</div>
<div class="item__dotted"></div>
<div class="item__btn">
<button>Копка</button>
</div>
</div>
</div>
.container {
max-width: 800px;
margin: 0 auto;
}
.item {
display: flex;
align-items: center;
padding: 10px 5px;
}
.item__content {
font-size: 16px;
padding: 5px;
}
.item__dotted {
border-top: 1px dotted #000;
flex-grow: 1;
}
.item__btn {
padding: 5px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.