<h1 class="title">Вариант 1</h1>
<div class="wrapper v1">
  <div class="line">
    <div class="line__text">
      <span class="line__word">Имя</span>
    </div>
    <div class="line__dash"></div>
    <div class="line__page">
      <span class="line__word">Иван</span>
    </div>
  </div>
  <div class="line">
    <div class="line__text">
      <span class="line__word">Две</span>
      <br />
      <span class="line__word">строки</span>
    </div>
    <div class="line__dash"></div>
    <div class="line__page">
      <span class="line__word">Одна строка</span>
    </div>
  </div>
  <div class="line">
    <div class="line__text">
      <span class="line__word">Одна строка</span>
    </div>
    <div class="line__dash"></div>
    <div class="line__page">
      <span class="line__word">Две</span>
      <br />
      <span class="line__word">строки</span>
    </div>
  </div>
</div>

<h1 class="title">Вариант 2</h1>
<div class="wrapper v2">
  <div class="line">
    <div class="line__text">
      <span class="line__word">Имя</span>
    </div>
    <div class="line__page">
      <span class="line__word">Иван</span>
    </div>
  </div>
  <div class="line">
    <div class="line__text">
      <span class="line__word">Две</span>
      <br />
      <span class="line__word">строки</span>
    </div>
    <div class="line__page">
      <span class="line__word">Одна строка</span>
    </div>
  </div>
  <div class="line">
    <div class="line__text">
      <span class="line__word">Одна строка</span>
    </div>
    <div class="line__page">
      <span class="line__word">Две</span>
      <br />
      <span class="line__word">строки</span>
    </div>
  </div>
</div>


<h1 class="title">Вариант 2 (с картинкой)</h1>
<div class="wrapper v2i">
  <div class="line">
    <div class="line__text">
      <span class="line__word">Имя</span>
    </div>
    <div class="line__page">
      <span class="line__word">Иван</span>
    </div>
  </div>
  <div class="line">
    <div class="line__text">
      <span class="line__word">Две</span>
      <br />
      <span class="line__word">строки</span>
    </div>
    <div class="line__page">
      <span class="line__word">Одна строка</span>
    </div>
  </div>
  <div class="line">
    <div class="line__text">
      <span class="line__word">Одна строка</span>
    </div>
    <div class="line__page">
      <span class="line__word">Две</span>
      <br />
      <span class="line__word">строки</span>
    </div>
  </div>
</div>

body {
  padding: 16px;
  gap: 16px;
  margin: 0;
  display: grid;
  grid-auto-rows: max-content;
  font: 16px 'Segoe UI', Arial, Helvetica, sans-serif;
}

.title {
  margin: 0;
}

.wrapper {
  padding: 4px;
  gap: 4px;
  display: grid;
  grid-auto-rows: max-content;
}

.v1 {
  .line {
    gap: 8px;
    display: grid;
    grid-template-columns: max-content 1fr max-content;
    align-items: end;

    &__text,
    &__dash,
    &__page {
      grid-row: 1;
    }

    &__text {
      grid-column: 1;
      font-weight: 500;
      z-index: 2;
    }

    &__dash {
      height: calc(100% - 0.25em);
      margin-bottom: 0.25em;
      border-bottom: 1px dashed;
      box-sizing: border-box;
      grid-column: 1 / -1;
      z-index: 1;
    }

    &__page {
      grid-column: -2;
      font-style: italic;
      text-align: right;
      z-index: 2;
    }

    &__word {
      padding: 2px 8px;
      margin: -2px -8px;
      white-space: nowrap;
      background: #ffffff;
    }
  }
}

.v2,
.v2i {
  .line {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    
    &::before {
      position: absolute;
      bottom: 0.25em;
      width: 100%;
      border-bottom: 1px dashed;
      content: '';
      z-index: 1;
    }

    &__text {
      font-weight: 500;
      z-index: 2;
    }

    &__page {
      font-style: italic;
      text-align: right;
      z-index: 2;
    }

    &__word {
      padding: 2px 8px;
      margin: -2px -8px;
      white-space: nowrap;
      background: #ffffff;
    }
  }
}

.v2i {
  background-image: url(https://images.unsplash.com/photo-1610813835315-9a93c5035c81?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1834&q=80);
  overflow: hidden;
  
  .line {
    color: #ffffff;
    mix-blend-mode: screen;

    &__word {
      background: #000000;
    }
  }
}