Move an absolute positioned element's right side to the left side of it's parent

Question

The Problem

I have a container within another one. The rule display: inline-block; on the outer container is a given. I want that the content of the inner container ends where the content of the outer one starts. I tried using left: -100%; but naturally it moves the content only as far as the outer container is wide. The use case: The inner element will be a tooltip shown on hover aligned on the left side.

How can I got both elements aligned after each other and not overlapping without using JavaScript?

HTML

<div>
    Short content
    <div>This is very long test sentence.</div>
</div>

CSS

div {
    position: relative;
    display: inline-block;
    margin: 40px 200px;
    background: rgba(123, 234, 345, 0.7);
}

div > div {
    position: absolute;
    top: 20px;
    left: -100%;
    margin: 0;
    background: rgba(0, 0, 0, 0.1);
    white-space: nowrap;
}

Demo on jsFiddle

Demo

Answer 1

Try using right: 100%; instead of left: -100%;. Like so:

http://jsfiddle.net/dkv9W/1/