Как верстается такой элемент?

Question

[chelnokov_a]

Здравствуйте. Есть какой-то верный способ сверстать такой элемент?

Comments

[g33km]

Как вариант, могу предложить так:

HTML

<div class="table">
<div class="table-row">
  <div class="table-row__name">Gabarity</div>
  <div class="table-row__underline"></div>
  <div class="table-row__value">123mm</div>
</div>
</div>

CSS

.table-row {
  display: flex;
  
  &__name {
    flex-basis: auto;
  }
  
  &__underline {
    flex-grow: 1;
    border-bottom: 1px solid grey;
  }
  
  &__value {
    flex-basis: auto;
  }
}

Только надо будет с помощью transform: translateY(-Y) подогнать положение серой линии. На рисунке она расположена по нижней границе текста, а не под ним.

[WapSter]

https://advancedwebcare.com/calculator/order-web-d... надеюсь умеешь пользоваться devtools

[chelnokov_a]

ubuntu_lts, Слышали что-нибудь о таком понятии как "рыбный текст"

Answer 1

[anvarik2]

Кажется, я что-то не понимаю, если что исправь меня, но, как бы, просто используй after и делай что хочешь