JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Вертикальная линия между колонками разной высоты</h1>
<div class="container">
  <div class="column col-1">
    <p>Lorem ipsum</p>
    <p>Lorem ipsum dolor .</p>
  </div>
  <div class="column col-2">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae aliquid libero o</p>
    <p>Lorem ipsum dolor si beatae.</p>
  </div>
</div>

CSS

body {
  padding: 40px;
  max-width: 960px;
  margin: auto;
}

.container {
  overflow: hidden;
}

.column {
  box-sizing: border-box;
  float: left;
  width: 50%;
}

.col-1 {
  border-right: 1px solid #a0a0a0;
  padding-right: 20px;
  text-align:right;
}

.col-2 {
  border-left: 4px solid #a0a0a0;
  margin-left: -1px;
  padding-left: 20px;
}

.column p:first-child {
  margin-top: 0;
}