Place element inside other element using absolute. Elements are siblings

Place element inside other element using absolute. Elements are siblings

I am trying to place an element, "inner", flush against the upper right
hand corner of another div, "outer", using absolute positioning. The
"inner" element is not a child of "outer". I therefore need to look up the
positioning of "outer" using js and use that.
However, it's not coming out quite right:
http://jsfiddle.net/BZBSF/1/
#wrapper{background:red;
width:100px;
height:100px;}
#inner{
position:absolute;
background:green;
width:50px;
height:100px;
margin:0;padding:0;
}
#body{position:relative;}
<div id = "body">
<div id = "wrapper"></div>
<div id = "inner"></div>
</div>
var rect = document.getElementById("wrapper").getBoundingClientRect();
$("#inner").css({ 'top': String($(window).scrollTop()+rect.top)+"px" });
width_inner = $("#inner").width();
$("#inner").css({ 'left':
String($(window).scrollLeft()+rect.right-width_inner)+"px" });