Нужно сделать пунктир между элементами

Question

Нужно сделать пунктир между элементами. Должно выглядеть вот так.

В моём случае, это выглядит вот так.

Блок имени и номера почему-то не выставляет ширину автоматически, а переносит половину текста вниз. Как решить эту проблему?

.contact-element {
margin-bottom: resize(15);
height: resize(15);
position: relative;
}

.name {
width: auto;
}

.contact-line {
width: 100%;
overflow-x: hidden;
overflow-y: hidden;
}

.number {
width: auto;
}

<div class="contact-element box-between">
            <div class="name">Vitalis Vance</div>
            <div class="contact-line">--------------------------------------------------</div>
            <div class="number">465-315</div>
        </div>

Answer 1

.contact-element {
    display: flex;
    width: 50%;
    margin-bottom: 10px;
    padding: 5px;
}

.name, .number {
    flex-shrink: 0;
}

.contact-line {
    align-self: center;
    width: 100%;
    height: 0;
    border-bottom: 1px dashed #000;
    margin: 0 5px;
}
/* Не обязательный кусок кода */
.contact-element:hover {
    background-color: rgba(27, 27, 27, 1);
    color: #fff;
}

.contact-element:hover .contact-line {
    border-color: currentColor;
}

<div class="contact-element box-between">
    <div class="name">Vitalis Vance</div>
    <div class="contact-line"></div>
    <div class="number">465-315</div>
</div>
<div class="contact-element box-between">
    <div class="name">Vitalis Vance Vance</div>
    <div class="contact-line"></div>
    <div class="number">465-3143435</div>
</div>
<div class="contact-element box-between">
    <div class="name">Vitalis</div>
    <div class="contact-line"></div>
    <div class="number">465</div>
</div>

Answer 2

Пример

* {
  box-sizing: border-box;
}

.block__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border: 1px solid #ccc;
}

.block__line {
  flex-grow: 1;
  flex-basis: 0;
  height: 1px;
  border-top: 1px dashed #000;
  margin: 0 .5rem;
}

<div class="block">
  <div class="block__row">
    <div class="block__text">text</div>
    <div class="block__line"></div>
    <div class="block__text">text</div>
  </div>
  <div class="block__row">
    <div class="block__text">text text text </div>
    <div class="block__line"></div>
    <div class="block__text">text</div>
  </div>
</div>

БЛОГ НА HUSL

Нужно сделать пунктир между элементами

Ответы (2 шт):