JSFiddle - React, Tailwind, and code Playground

HTML

<span class="method1">
  awhieugfrafgtgtfhjjygfjyjg
  <hr/>
</span>

<br><br>

<span class="method2">
  awhieugfrafgtgtfhjjygfjyjg
  <hr/>
</span>

<br><br>

<span class="method3">
  awhieugfrafgtgtfhjjygfjyjg
  <hr/>
</span>

<br>
<br>

<span>
  awhieugfrafgtgtfhjjygfjyjg<font color="#42B3E5"><hr width="50" align="left"/></font>
</span>

CSS

.method1 hr {
    height:2px;
    margin:0px;
    margin-top:10px;
    border:0px;
    background:#42B3E5;
    width:50px;
    position:absolute;/*ensures alignment to the left, not a must*/
  }
  .method2 hr {
    height:0px;
    margin:0px;
    margin-top:10px;
    border:0px;
    border-top:2px solid #42B3E5;
    width:50px;
    position:absolute;/*ensures alignment to the left, not a must*/
  }
  .method3 hr {
    height:1px;
    margin:0px;
    margin-top:10px;
    border:0px;
    border-top:1px solid #42B3E5;
    background:#42B3E5;
    width:50px;
    position:absolute;/*ensures alignment to the left, not a must*/
  }