How can I align the btn-group div to the top right? - html

Question

This is the html I'm working with (which I cannot change):
<div class="article-summary media">
<div class="media-body">
<h3 class="media-heading">
<a href="">
Boosting SRL for Recommendation Systems
</a>
</h3>
<div class="meta">
<div class="authors">
Kaushik Roy
</div>
</div>
<div class="btn-group" role="group">
<a class="galley-link btn btn-default role=" button"="" file"="" href="">
PDF
</a>
<a class="galley-link btn btn-default role=" button"="" file"="" href="">
XML
</a>
</div>
</div>
<div class="media-body">
....
</div>
</div>
This is what it looks like now
This is how I want it to look
I'm trying to push the PDF|XML btn-group to the upper right. If the h3.media-heading is long, it should stop short of the btn-group and continue on the next line instead of pushing the btn-group down

Answer 1

Here's my current solution but I'm not sure if there are any side-effects I'm not thinking of
.media-body {
position: relative;
}
.media-heading {
float: left;
padding-right: 150px;
}
.meta {
float: left;
clear: left;
}
.media-body > div.btn-group {
position: absolute;
right: 0;
}
Basically, I float all the .media-heading and .meta to the left, and I try to use absolute position to place the btn-group. I add a relative position to the btn-group's container, which is the .media-body because I learned that helps contain the absolute positioning of the element, otherwise, it flies out of the container and to the right of the entire page.