How to vertically center a horizontal line to the first line of a multiline paragraph using CSS?

Question

I have a layout where I need to position a horizontal line next to a multiline paragraph. The line should be vertically centered to the first line of the paragraph, not to the entire paragraph.

I've tried using CSS Flexbox to align the items, but it seems to center the line relative to the entire paragraph. How can I adjust the CSS to achieve this alignment?

Here is the HTML and CSS code I have so far:

body {
  font-family: Arial, sans-serif;
  margin: 20px;
}

.container {
  display: flex;
  column-gap: 20px;
  align-items: flex-start;
}

.line {
  flex-shrink: 0;
  width: 50px;
  height: 2px;
  background-color: red;
}

p {
  margin: 0;
  margin-bottom: 20px;
}

<div class="container">
  <div class="line"></div>
  <div class="text-container">
    <p class="text">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    </p>
    <p class="text">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    </p>
  </div>
</div>

Answer 1

Use half the height of one line .5lh

body {
  font-family: Arial, sans-serif;
  margin: 20px;
  font-size: 20px;
}

.container {
  display: flex;
  column-gap: 20px;
  align-items: flex-start;
}

.line {
  /* new code */
  margin-top: .5lh;
  translate: 0 -50%;
  /**/
  flex-shrink: 0;
  width: 50px;
  height: 2px;
  background-color: red;
}

p {
  margin: 0;
  margin-bottom: 20px;
}

<div class="container">
  <div class="line"></div>
  <div class="text-container">
    <p class="text">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    </p>
    <p class="text">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    </p>
  </div>
</div>

You can also simplify the code like below:

body {
  font-family: Arial, sans-serif;
  margin: 20px;
}
.text {
  padding-left: 70px;
}
.text:first-of-type {
  background:
    linear-gradient(red 0 0) no-repeat
    0 calc(.5lh - 1px)/50px 2px;
}
p {
  margin: 0 0 20px;
  font-size: 20px;
}

<p class="text">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</p>
<p class="text">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</p>