JSFiddle - React, Tailwind, and code Playground

by ArsenMelkumiants

HTML

<div class="balanced-unbalanced">
  <div class="price">0.250000 EUR</div>
  <div class="division"></div>
  <div class="price">
  
      from 0 to 120,000........0.250000 EUR/min<br>
from 120,000 to 330,000........0.150000 EUR/min<br>
from 330,000 to 500,000........0.100000 EUR/min<br>
      more than 500,000........0.050000 EUR/min
  </div>
</div>

<div class="balanced-unbalanced">
  <div class="price">
  
      from 0 to 120,000........0.250000 EUR/min<br>
from 120,000 to 330,000........0.150000 EUR/min<br>
from 330,000 to 500,000........0.100000 EUR/min<br>
      more than 500,000........0.050000 EUR/min
  </div>
  <div class="division"></div>
  <div class="price">0.250000 EUR</div>
</div>

<div class="balanced-unbalanced">
  <div class="price">
  
      from 0 to 120,000........0.250000 EUR/min<br>
from 120,000 to 330,000........0.150000 EUR/min<br>
from 330,000 to 500,000........0.100000 EUR/min<br>
      more than 500,000........0.050000 EUR/min
  </div>
  <div class="division"></div>
  <div class="price">
  
      from 0 to 120,000........0.250000 EUR/min<br>
from 120,000 to 330,000........0.150000 EUR/min<br>
from 330,000 to 500,000........0.100000 EUR/min<br>
      more than 500,000........0.050000 EUR/min
  </div>
</div>

<div class="balanced-unbalanced">
  <div class="price">0.250000 EUR</div>
  <div class="division"></div>
    <div class="price">0.250000 EUR</div>
</div>

CSS

.balanced-unbalanced {
  display: flex;
  align-items: stretch;
  margin-bottom: 35px;
}

.division {
  width: 5px;
  margin-left: 5px;
  border-left: 1px solid black;
  
}

.price {
  display: flex;
  align-items: center;
  text-align: right;
  padding: 0 10px;
}