JSFiddle - React, Tailwind, and code Playground

by James Gill

HTML

<div class="volume_title_page">
		<div>
			<p class="chaos_subtitle_text_1">OPISCULUM DAEMONIS</p>
			<h1 class="chaos_title_text">LIBER</h1>
			<h1 class="chaos_title_text">CHAOTICA</h1>
			<h3 class="chaos_subtitle_text_2"><span>Volumes One To FiveVolumes One To FiveVolumes One To Five</span></h3>
			<p class="chaos_subtitle_text_1">WITH FORMER INVESTIGATIONS DILIGENTLY COMPARED AND REVISED</p>
			<p class="centered_text">---0---</p>
			<h3 class="chaos_subtitle_text_3">And expository lectures on the followers and rituals of Chaos</h3>
			<p class="centered_text">---0---</p>
			<p class="centered_text">BEING IN THE MAIN AN EXAMINATION OF THE DAEMONIC AND MORTAL ARMIES OF CHAOS, AND IN PART, BEING A DESCRIPTION OF THE NUMBERLESS UNNATURAL CREATURES THAT DO ACCOMPANY THEM</p>
			<p class="centered_text"><img width="70" height="100" alt="Liber Chaotica Volume Title Page Image" src="images/Liber Chaotica Cover.jpg"/></p>
			<p class="centered_text">FEATURING TEXTS COMPILED AND ANNOTATED BY THE AUTHOR RICHTER KLESS</p>
			<p class="centered_text">Illustrated and illuminated with numerous plates compiled by the author</p>
			<p class="centered_text">Printed by Johannes Innsbrook, Printer to Albertus Mansoul,</p>
			<p class="centered_text">Bound by Christoph Hassel of Wolfenburg</p>
		</div>
	</div>

CSS

.chaos_subtitle_text_2 {
	font-family: "PlainGermanica", sans-serif;
	text-align: center;
  --headingLineOffsetFromText: 10px;
  position: relative;
  overflow: hidden;
  width: 99%;
  margin: 0 auto;
  padding: 0 50px;
  box-sizing: border-box;
}

.chaos_subtitle_text_2 span {
  position: relative;
  text-align: center;
  display: inline-block;
}
.chaos_subtitle_text_2 span:before, .chaos_subtitle_text_2 span:after {
  content: "";
  border-bottom: 1px solid black;
  width: 5000px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

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

.chaos_subtitle_text_2 span:after {
  left: calc(100% + var(--headingLineOffsetFromText));
}

.volume_title_page {
	border: 2rem var(--volume_title_border_colour);
	border-top-style: ridge;
	border-bottom-style: groove;
	border-left-style: groove;
	border-right-style: ridge;
	border-radius: 0;
	margin-left: auto;
	margin-right: auto;
	width: 700px;
}

.volume_title_page div {
	margin: 2rem 5.1rem;
}

.centered_text {
	text-indent: 0;
	text-align: center;
}

.chaos_title_text {
	color: var(--blood_text_colour);
	font-family: "Abaddon™", sans-serif;
	text-indent: 0;
	text-align: center;
}

.chaos_subtitle_text_1 {
	font-family: "Abaddon™", sans-serif;
	text-indent: 0;
	text-align: center;
}