I'd like the width of this particular HR to be the same width of the "LARGER HEADER LIKE THIS" above it on any screen size. I have a default width for hr of 245px, but for this particular one I'd like to be as same as the width of the text above for any screen size
hr {
border-top: 0px solid blue !important;
padding: 0;
margin-top: 0.5em !important;
border-width: 6px !important;
width: 245px;
}<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row text-center">
<h1>HEADER 1</h1>
</div>
<div class="row text-center">
<h1>LARGER HEADER LIKE THIS</h1>
<hr>
</div>