Place the element in the top right corner of the <span> in IE

I am having trouble positioning an element (div) in the upper right corner of a range. It works in FF3, but not IE7:

<html>
<head>
<style>
body
{
    font-size: 24px;
}

.tag
{
    padding: 3px;
    background-color: lightblue;
    position: relative;
}

.x
{
    position: absolute;
    top: 0px;
    right: 0px;
    width: 10px;
    height: 10px;
    background-color: orange;
}
</style>
</head>
<body>
text <span class="tag">tag<div class="x"></div></span> text 
</body>
</html>

      

        
        
        
      

    

In FF3, a 10x10 orange box is displayed in the upper right corner of the blue square. I am having trouble getting this to work in IE7. Thanks!