Make icon appear on top right of the box - html

Question

I would like to make the question mark on hover appear on the top right part of the white box. Currently, it is appearing on the bottom left part of the white box.
<div class="panel panel-default">
<div class="panel-heading">
Test
</div>
<div class="panel-body">
<div id="rptTitle">
<br />
<br />
Text here....... text here......
<br />
<br />
</div>
<div class="questionBox" data-original-title="More Information" data-toggle="tooltip" data-placement="top">
<i class="fa fa-question-circle grayColor"></i>
</div>
</div>
</div>
CSS:
.grayColor {
color: #A6A6A6;
}
.panel {
cursor: pointer;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #fff;
opacity: 0.8;
}
.panel:hover {
cursor: pointer;
border: 1px solid #eee;
background: #fff none repeat scroll 0 0;
opacity: 1;
}
.panel:hover .panel-heading {
background-color: #f6f6f6;
}
.panel .questionBox i {
font-size: 15px;
display: none;
}
.panel:hover .questionBox i {
font-size: 15px;
display: block;
}
JSFiddle
I tried using position:absolute; and using right, top but that wouldn't help me if I have multiple divs
UPDATE:

Answer 1

You should relatively position your outer panel and then you can absolutely position your icon.
Try the following solution:
.panel {
position:relative;
}
.fa.fa-question-circle {
position: absolute;
top: 0;
right: 0;
}
Fiddle
The reasoning for this is because absolutely positioning something positions an item relative to it's first ancestor element that is positioned non-statically. This is the reason for the relative positioning to the panel.
Picture a box. The box has a relative positioning. Anything inside of that box that is positioned absolutely has a maximum height/width of that box. So when you position the icon absolutely and use top: 0; right: 0, you get it to the top right of that box. In this case, the box is the panel.
UPDATE
Given your new criteria, you can try something like this:
#rptTitle {
display:inline-block;
width: 90%;
}
.questionBox {
display: inline-block;
float: right;
}
It's a quick and dirty solution, but fits your needs. Use the concepts to build it better :)
New Fiddle

Answer 2

You had the right idea with position:absolute; but you also need to set the parent element to position:relative;. Lastly add top:0px and right:0px to the question mark element.
With the updated post you will need to also move the div inside the div with the class panel-body and make sure panel-body is position:relative;.
JSFiddle

Answer 3

Try this:
.questionBox > * {
position: absolute;
top:65px;
right: 25px;
}
Live example:
(updated) https://jsfiddle.net/kow5np4q/7/
Another approach (without position: absolute)
https://jsfiddle.net/kow5np4q/8/
The 3rd approach:
https://jsfiddle.net/kow5np4q/10/
And with the 3rd approach, you don't need to use <br>s. Use padding instead.