How can I have a H2 and a HR tag in-line without using bad practice?

Question

so I want to make a HR and a H2 element display on the same line, so that it looks like this:

http://gyazo.com/7943d8d8b6d23ebffc80a60c0acc872f

But it looks like this:

http://gyazo.com/30f80e33d627e7bbedf56565afbd5509

And here is the code:

hr {
display:inline-block;
width:60%;
float:right;
margin-right:20px;
height:5px;
background-color:#FFFFFF;
}

<h2 class="minecrafter" style="padding-left:10px;padding-top:10px;letter-spacing:3px;">Miners Union</h2> <hr>

Now I know I can easily fix this by having the HR tag infront of the H2 tag, but I know that this is bad practice and I don't think it will work in xHTML.

Thank you for reading and any replies :)

Edited to correct typo as pointed out

Answer 1

You could use :after element like this: fiddle

h2:after {
    content: '';
    display: inline-block;
    height: 3px;
    background: red;
    width: 60%;
    float: right;
    margin-top: 15px;
}