[Steadyhands]

What about if you want the line beside the heading like this?

I'd like a better way to do this as it doesn't allow for changes in the size of the chapter heading text, and I'd like it to start on the right then finish at the header.

  <h2>BLA BLA BLA BLA BLA</h2>

  <div class="ruleclass">
    <hr />
  </div>

.ruleclass {
   margin-left: 1em;
   margin-right: 1em;
   margin-top: -4em;
   }
hr {
   height: 3px;
   background:#505050;
   width: 40%;
   }