JSFiddle - React, Tailwind, and code Playground

by James Gill

HTML

<div class="box">
  <h3 class="header-with-line">
    <span>
      Volumes One To FiveVolumes One To FiveVolumes One To Five
    </span>
  </h3>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id quam condimentum, placerat nulla consectetur, volutpat arcu. Aliquam neque dolor, mattis vitae fermentum id, vehicula non massa. Nullam tincidunt sem eu rutrum ultrices. Sed commodo augue a imperdiet pretium. Aenean erat enim, viverra vel nibh quis, dapibus ornare tortor. Sed porta, nibh eu facilisis molestie, nunc sem consequat metus, eu tempor arcu purus eget eros. Ut ac ex eu erat porta varius. Integer elementum tincidunt scelerisque. Sed pretium augue id ornare posuere. Sed fermentum ultrices sapien vitae rhoncus. Sed ultricies dapibus tortor, vel maximus justo fermentum eu.
  </p>
</div>

CSS

.box {
  padding: 2rem 5.1rem;
  background: linear-gradient(45deg, wheat 0%, grey 100%);
	margin-left: auto;
	margin-right: auto;
  box-sizing: border-box;
}

.header-with-line {
  display: flex;
  text-align: center;
  gap: 0 10px;
  position: relative;
  overflow: hidden;
  align-items: center;
  justify-content: space-between;
}

.header-with-line:before, .header-with-line:after {
  content: "";
  min-width: 50px;
}

.header-with-line span {
  display: inline;
  background: blue;
}
/* .header-with-line span:before,
.header-with-line span:after {
  content: "";
  border-bottom: 1px solid black;
  width: 50vw;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.header-with-line span:before {
  right: calc(100% + var(--headingLineOffsetFromText));
}

.header-with-line span:after {
  left: calc(100% + var(--headingLineOffsetFromText));
} */