Линия переменного размера в тексте

.list { 
  font-family: monospace; 
} 
.list-row { 
  /* Ненужное свойство */ 
  display: block; 
  /* Чтобы учитывалась высота .list-row-title */ 
  overflow: auto; 
} 
.list-row-title { 
  /* Распологает заголовок слева, чтобы расположить div'ы рядом */ 
  float: left; 
  /* Отступ полосы от заголовка */ 
  margin-right: 0.5em; 
} 
.list-row-field { 
  /* Занять всё оставшееся пространство */ 
  overflow: auto; 
  /* Высота размеров со строку */ 
  height: 1.2em; 
  /* Снизу граница, напоминающая подчёркивание */ 
  border-bottom: 1px solid black; 
  color: grey; 
}

<div class="list"> 
  <div class="list-row"> 
    <div class="list-row-title">Ф.И.О. пациента</div> 
    <div class="list-row-field"></div> 
  </div> 
  <div class="list-row"> 
    <div class="list-row-title">Возраст</div> 
    <div class="list-row-field"></div> 
  </div> 
  <div class="list-row"> 
    <div class="list-row-title">Ф.И.О. личного врача</div> 
    <div class="list-row-field">Иванчук И.И.</div> 
  </div> 
</div>

ul { 
  list-style-type: none; 
  padding: 0; 
  margin: 0; 
} 
 
li { 
  overflow: hidden; 
} 
 
span { 
  display: inline-block; 
  position: relative; 
  padding-right: 15px; 
  font-family: monospace; 
} 
 
span:after { 
  content: ''; 
  position: absolute; 
  left: 100%; 
  right: -9999px; 
  bottom: 0; 
  height: 1px; 
  background: #000; 
}

<ul> 
  <li> 
    <span>Ф.И.О. пациента</span> 
  </li> 
  <li> 
    <span>Возраст</span> 
  </li> 
  <li> 
    <span>Ф.И.О. лечащего врача</span> 
  </li> 
</ul>

body { 
  padding-right: 80px; 
} 
 
.line { 
  font-family: monospace; 
  display: flex; 
  justify-content: space-between; 
  position: relative; 
} 
 
.line::before { 
  background-color: #ccc; 
  content: ''; 
  display: block; 
  position: absolute; 
  left: 0; 
  right: 5px; 
  bottom: 5px; 
  z-index: 1; 
  height: 1px; 
} 
 
.property, 
.value { 
  padding: 5px; 
  max-width: 48%; 
  overflow: hidden; 
  white-space: nowrap; 
  text-overflow: ellipsis; 
  position: relative; 
  z-index: 2; 
} 
 
.property { 
  background-color: #fff; 
} 
 
.value { 
  color: #bada55; 
}

<div class="line"> 
  <div class="property">Ф.И.О. лечащего врача</div> 
  <div class="value">Сидоров А.И.</div> 
</div> 
<div class="line"> 
  <div class="property">Ф.И.О. пациента</div> 
  <div class="value">Протуберанцевич Д.М.</div> 
</div> 
<div class="line"> 
  <div class="property">Какое-то очень длинное длинное название свойство, не влезающее в блок</div> 
  <div class="value">Значение</div> 
</div>

.list { 
  font-family: monospace; 
} 
 
.list-row { 
  display: flex; 
  /* расположить элементы по линий шрифта */ 
  /* будет полезно если захотите разные размеры шрифта для левой и правой частей */ 
  align-items: baseline; 
} 
 
.list-row-title { 
  /* небольшой отступ, чтобы строки были равной высоты */ 
  padding-bottom: 3px; 
} 
 
.list-row-field:before { 
  /* неразрывный пробел чтобы блок имел верную высоту */ 
  content:"\00a0"; 
} 
 
.list-row-field { 
  margin-left: 10px; 
  /* занять всё оставшееся пространство */ 
  flex: 1; 
  /* снизу граница, напоминающая подчёркивание */ 
  border-bottom: 1px solid black; 
  /* если хотите расположить текст справа */ 
  text-align: right; 
}

<div class="list"> 
  <div class="list-row"> 
    <div class="list-row-title">Ф.И.О. пациента</div> 
    <div class="list-row-field"></div> 
  </div> 
  <div class="list-row"> 
    <div class="list-row-title">Возраст</div> 
    <div class="list-row-field"></div> 
  </div> 
  <div class="list-row"> 
    <div class="list-row-title">Ф.И.О. личного врача</div> 
    <div class="list-row-field">Петров</div> 
  </div> 
</div>