JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <h1>Заголовок</h1>
  <p> В чем заковыка? А вот в линиях по длине контента (что делается inline-block), но главное - центрированием самого заголовка.  В чем заковыка? А вот в линиях по длине контента (что делается inline-block), но главное - центрированием самого заголовка.  В чем заковыка? А вот в линиях по длине контента (что делается inline-block), но главное - центрированием самого заголовка. </p>
</div>

CSS

.wrapper {
}
h1 {
  display: inline-block;
  text-align: center;
  border-bottom: 5px solid #000;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
h1:after {
  content: "";
  position: absolute;
  bottom: -15px;
  border-bottom: 5px solid #000;
  width: 100%;
  left: 0;
}