JSFiddle - React, Tailwind, and code Playground

by Yuval Bar-On

HTML

<div id="example">
<h1 class="row-title">
    <span class="row-title-text">Some Title</span>
    <span class="row-title-line"></span>
</h1>
</div>

CSS

* { font-family: sans-serif; }

#example {
    width: 600px;
    height: 200px;
    background: #aae;
    
}

h1 {
    font-size: 20px;
    padding: 20px;
}

h1.row-title {
    color: black;
    margin-left: 15px;
    margin-right: 15px;
    white-space: nowrap;
    overflow: hidden;
}

h1.row-title span.row-title-text {
    display: inline;
}

h1.row-title span.row-title-line {
      display: inline-block;
      background: -webkit-linear-gradient(rgba(0, 0, 0, 0) 48%,
                  black 48%, black 52%, rgba(0, 0, 0, 0) 52%);
      background: linear-gradient(rgba(0, 0, 0, 0) 48%,
                  black 48%, black 52%, rgba(0, 0, 0, 0) 52%);
      width: 100%;
      height: 13px;
      margin-left: 10px;
}