JSFiddle - React, Tailwind, and code Playground

HTML

<h2 style=";">Featured products</h2>
<h2 style=";">Here is a very long h2, and as you can see the line get too wide</h2>

CSS

h2 {
color: #000000;
font-family: 'collegeregular';
font-size: 20px;
margin-left: 5px;
position: relative;
width: 93%;
}

h2:after {
position: absolute;
content: "";
height: 2px;
background-color: #242424;
width: 50%;
margin-left: 15px;
top: 50%;
}