JSFiddle - React, Tailwind, and code Playground

HTML

<div class="border">
  <div class="title"><span>Какой нибудь заголовок</span></div>
  Каждый веб-разработчик знает, что такое текст-«рыба». Текст этот, несмотря на название, не имеет никакого отношения к обитателям водоемов. Используется он веб-дизайнерами для вставки на интернет-страницы и демонстрации внешнего вида контента, просмотра шрифтов, абзацев, отступов и т.д. Так как цель применения такого текста исключительно демонстрационная, то и смысловую нагрузку ему нести совсем необязательно. Более того, нечитабельность текста сыграет на руку при оценке качества восприятия макета.
</div>

CSS

body  {
  background: red;
}
.border {
  border: 2px solid #000;
  border-top: 0;
  padding: 0 20px 20px;
  margin: 40px;
}
.title {
  position: relative;
  top: -10px;
  margin: 0 -20px 40px;
  overflow: hidden;
}
.title span {
  position: relative;
  display: inline-block;
  margin: 0 40px 0 60px;
  padding: 0 10px;
}
.title span:after,
.title span:before {
  content: '';
  width: 1000px;
  height: 2px;
  background: #000;
  position: absolute;
  top: 10px;
  left: 100%;
}
.title span:before {
  left: auto;
  right: 100%;
}