JSFiddle - React, Tailwind, and code Playground

HTML

<div class="horizontal-ruler">
  <div class="h-ruler-first-line"></div><!--
--><div class="ruler-unit">24"</div><!--
--><div class="h-ruler-second-line"></div>
</div>

CSS

.horizontal-ruler{
	width: 100%;
	height:25px;
	line-height: 25px;
	display: block;
	font-size: 14px;
	color:#373737;
}
.horizontal-ruler .ruler-unit{
	width: 30px;
	text-align: center;
	display: inline-block;
	line-height: 25px;
	height: 25px;
	vertical-align: middle;
}
.h-ruler-first-line, .h-ruler-second-line{
	width:calc(50% - 15px);
	margin:12px 0;
	height: 1px;
	background-color: #373737;
	display: inline-block;
  vertical-align: middle;
}