JSFiddle - React, Tailwind, and code Playground

by Ankhena

HTML

<div class="wrapper">
  <div class="item">
    <div><span>Фамилия</span></div>
    <div><span>Мамай</span></div>
  </div>
  <div class="item">
    <div><span>Имя и отчество</span></div>
    <div><span>Станиславаленина Владимировна</span></div>
  </div>
  <div class="item">
    <div><span>Номер полиса выдан заведомо ложный</span></div>
    <div><span>01234567</span></div>
  </div>
  <div class="item">
    <div><span>Дата рождения</span></div>
    <div><span>01.12.1976</span></div>
  </div>
  <div class="item">
    <div><span>Телефон</span></div>
    <div><span> +79113332211</span></div>
  </div>
</div>

CSS

* {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

body {
  padding: 40px;
  margin: 0;
}

.wrapper {
  width: 500px;
  padding: 20px;
  margin: 20px auto;
  border: 5px solid lightgreen;
  background: #caffd7;
}

.item {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 20px;
  background: linear-gradient(to right, #999 33%, transparent 33%) repeat-x bottom center / 5px 1px;
}

.item div {
  max-width: 200px;
}

.item div:nth-child(2) {
  text-align: right;
}

.item div span {
  /*box-shadow: 0 0 0 5px #ffffd7*/
}

/*
    !!!!
    Но с тенями нужно следить за line-height
    */

/*вариант с фоном и паддингом не подходит, т.к. во втором столбце левый паддинг получится у первой строчки, а не у второй*/
.item div:nth-child(1) span {
  box-shadow: 5px 5px 0 5px #caffd7
}

.item div:nth-child(2) span {
  box-shadow: -5px 5px 0 5px #caffd7
}