JSFiddle - React, Tailwind, and code Playground

by Tinh Nguyen Nhu

HTML

<h1><span>This is a title</span></h1>

CSS

/* Align text to the left and right on the same line with CSS
 */

h1 {
	display: block;
	width: 100%;
	text-align: center;
	margin: 0;
}

h1 span {
	position: relative;
	display: inline-block;
	padding: 0 10px;
}

h1 span:before {
	content: "";
	position: absolute;
	top: 50%;
	right: 100%;
	height: 1px;
	width: 2000px;
	background: #d7d7d7;
}

h1 span:after {
	content: "";
	position: absolute;
	top: 50%;
	left: 100%;
	height: 1px;
	width: 2000px;
	background: #d7d7d7;
}