JSFiddle - React, Tailwind, and code Playground

by Александр Парчагин

HTML

<div class="box">
    <div class="box__name"><span>Хараектеристика</span></div>
    <div class="box__value">1000</div>
</div>
<div class="box">
    <div class="box__name"><span>Длинная характеристика</span></div>
    <div class="box__value">1000 км.ч</div>
</div>
<div class="box">
    <div class="box__name"><span>Короткая</span></div>
    <div class="box__value">10</div>
</div>

CSS

.box__name{
    display: inline-block;
    vertical-align: top;
    width: 300px;
    position: relative;
}
.box__name::before{
    content: '';
    position: absolute;
    bottom: 3px;
    left: 0;
    width: 100%;
    border-bottom: 1px dotted #000;
}
.box__name span{
    position: relative;
    padding-right: 3px;
    padding-bottom: 5px;
    background: #fff;
}
.box__value{
    display: inline-block;
    vertical-align: top;
}