I'm declaring css for hr tag like ..

```
hr { 
    height: 2px !important;
    background-color: #A2B1B9;
    width: 9%;
    margin-left: 0px;
    margin-top:auto;
  }

```

But the width of the hr tag dosen't always need to be the same as per the text that it is supported with. Please refer to the screen shot.
[![image](https://i.stack.imgur.com/6gwak.jpg)](https://i.stack.imgur.com/6gwak.jpg)

In this case I can either supply differen width along with the hr tag using inline css like . But as inline css dosen't fit to the ethical standards of web development is there any other approach that I could follow to make it dynamic?