JSFiddle - React, Tailwind, and code Playground

HTML

<accent>
	<left>A</left>
	<box><icon></icon></box>
	<right>B</right>
</accent>

CSS

html{background: white}
accent{
	display: block;
	border-bottom: 1px solid red;
	margin-top: 100px; /* placement of the accent */
	margin-bottom: 0px;
	width: 100%;
}

left, right{top: -25px;position: relative;width: calc(50% - 20px)}
left {float: left;text-align: left}
right {float: left;text-align: right}

box {
	float: left;
	text-align: center;
	width: 40px;
}

icon{
	background:url(https://s3-us-west-2.amazonaws.com/appdirect-assets/Blog%20Images/Content/2011/SVG-icons.png) no-repeat;
	background-position: -4px -6px;
	margin: auto;
	width:30px;
	height:30px;
	display: block;
	margin-top: -10px;
	-ms-transform: scale(3); -o-transform: scale(3); -webkit-transform: scale(3); transform: scale(3);
	border: 1px solid white;
	outline: 1px solid red;
}