JSFiddle - React, Tailwind, and code Playground

by wwt

HTML

<div class="param">
    <div class="name">Цвет</div>
    <div class="value">Красный</div>
</div>
<div class="param">
    <div class="name">Размер</div>
    <div class="value">3м</div>
</div>
<div class="param">
    <div class="name">Вес</div>
    <div class="value">1кг</div>
</div>

CSS

.param {
    min-width: 200px;
    position: relative;
}

.name  {
    box-sizing: border-box;
    width: 50%;
    overflow:hidden;
}

.name:after {
	content: "";
    display: inline-block;
    width: 100%;
	margin-right: -100%;
    margin-left: 3px;
	border-bottom: 1px dashed #ccc;
}

.value {
    box-sizing: border-box;
    width: 50%;
    padding-left: 3px;
    position: absolute;
    bottom: 0;
    right: 0;
}