JSFiddle - React, Tailwind, and code Playground

HTML

<p>Some text<br />in a paragraph.</p>
<div class="hr-sect">CATEGORY</div>
<p>Some more text<br />in a paragraph.</p>

CSS

body {
  font-family: Helvetica;
}
.hr-sect {
	display: flex;
	flex-basis: 100%;
	align-items: center;
	color: rgba(0, 0, 0, 0.35);
	font-size: 12px;
	margin: 8px 0px;
}
.hr-sect::before,
.hr-sect::after {
	content: "";
	flex-grow: 1;
	background: rgba(0, 0, 0, 0.35);
	height: 1px;
	font-size: 0px;
	line-height: 0px;
	margin: 0px 16px;
}