Добрый день. Как сделать чтобы имена полей "Рынок, сегмент итд." находились на максимальном удалении от значения и между ними проставлялись точки, как на картинке. В один span или div не могу их обернуть oracle jet не дает данные приходящие из JSON внести в блок уже с каким то текстом, поэтому имя и значение разбил по блокам.
.oj-flex {
box-sizing: border-box;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.oj-xl-6 {
-webkit-flex: 0 1 50%;
flex: 0 1 50%;
max-width: 50%;
width: 50%;
}
.one {
background-color: red;
}
.two {
background-color: #00a13b;
}
<div class="parent oj-flex">
<div class="oj-xl-6 oj-lg-6 oj-md-6 one">
<div class="oj-flex">
<span class="oj-sm-12 oj-flex-item">Рынок.......
<span class="modul">123 имя рынка</span></span></div>
<div class="oj-flex">
<span class="oj-sm-12">Сегмент.......
<span class="modul"></span>123 имя сегмента</span></div>
<div class="oj-flex">
<span class="oj-sm-12">Категория.......
<span class="modul">имя категории в две строки</span></span></div>
<div class="oj-flex">
<span class="oj-sm-12">Семья.......
<span class="modul"> имя семьи</span></span></div>
</div>
<div class="oj-xl-6 oj-lg-6 oj-md-6 two">
<div class="oj-flex">
<span class="oj-sm-12 oj-flex-item">Основной штрихкод.......
<span class="modul">123232543543</span></span></div>
<div class="oj-flex">
<span class="oj-sm-12 oj-flex-item">GICA.......
<span class="modul">АС</span></span></div>
<div class="oj-flex">
<span class="oj-sm-12 oj-flex-item">METI.......
<span class="modul"></span>1</span></div>
<div class="oj-flex">
<span class="oj-sm-12 oj-flex-item">Lillapois.......
<span class="modul">1</span></span></div>
</div></div>