隐藏右侧的可变宽度元素

Question

I have the following layout: http://jsfiddle.net/yHPTv/2487/

What I need to do is hide the .hidden class to the right edge of the .block class and have it only appear (by sliding in) on hover to the current position you see it in the JSFiddle.

The issue is, the .hidden class is of variable-width, meaning that the content inside it ( ABCDEFGHIJKL ) can be completely different, sometimes shorter, sometimes longer.

How would I solve this?

Edit: To clarify what I mean by hiding it to the right edge of the .block class, I mean like this , except it wouldn't be shown.

HTML:

<div class="block">
    <div class="hidden">ABCDEFGHIJKL</div>
</div>

CSS:

.block {
    position: relative;
    width: 500px;
    height: 300px;
    overflow: hidden;
    background: lightgrey;
}

.block .hidden {
    background: red;
    padding: 3px 10px;
    position: absolute;
    bottom: 0;
    right: 0;
}

Answer 1

To solve my own question, I simply removed right: 0 from .block .hidden and put left: 100% .

http://jsfiddle.net/yHPTv/2488

HTML:

<div class="block">
    <div class="hidden">ABCDEFGHIJKL</div>
</div>

CSS:

.block {
    position: relative;
    width: 500px;
    height: 300px;
    overflow: hidden;
    background: lightgrey;
}

.block .hidden {
    background: red;
    padding: 3px 10px;
    position: absolute;
    bottom: 0;
    left: 100%;
}