CSS3 Transition: Animate child to 100% width, parent jumps to 100% width instantly

CSS3 Transition: Animate child to 100% width, parent jumps to 100% width
instantly

I am trying to create a delete button, that once you click it, expands to
show the delete option, so you won't delete anything by mistake. The
problem is that the parent container jumps to full size right away while I
would like it to grow gradually.
I don't really know how to explain it clearly so I've made a fiddle to
show you: http://jsfiddle.net/cgHcP/
HTML:
<div class="right">
<div style="background-color: #000; display: inline-block;">
<div class="roll-button">
<div class="icon">x</div>
<div class="text">Remove</div>
</div>
</div>
<div style="background-color: #000; display: inline-block;">
<div class="roll-button">
<div class="icon">x</div>
<div class="text">Remove</div>
</div>
</div>
</div>
CSS:
/* Roll Button */
div.roll-button {
float: right;
display: inline;
position: relative;
height: 24px;
width: 24px;
-webkit-box-shadow: 0 0 0 2px #fff;
-webkit-border-radius: 12px;
text-align: center;
vertical-align: middle;
background-color: #fff;
overflow: hidden;
-webkit-transition: width .5s ease-in-out;
transition: width .5s ease-in-out;
}
div.roll-button .icon {
left: 0;
display: inline;
position: absolute;
font-size: 24px;
width: 24px;
height: 24px;
background-color: #ff3e3e;
-webkit-border-radius: 12px;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
text-align: center;
vertical-align: middle;
color: #fff;
line-height: .7;
}
div.roll-button .text {
float: left;
display: inline;
position: relative;
height: 24px;
overflow: hidden;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
vertical-align: middle;
line-height: 24px;
color: #ff3e3e;
font-weight: 700;
padding: 0 0 0 24px;
font-size: 12px;
}
div.roll-button:hover .text {
padding: 0 5px 0 29px;
}
div.roll-button:hover .icon {
-webkit-transform: rotateZ(-180deg);
}
div.roll-button:hover {
width: 100%;
}
.right {
float: right;
margin-right: 200px;
}
When you look at the fiddle, you'll notice the parent container (black),
jumps to full size when hovered. Even though the child seems to grow
gradually. This behavior causes trouble when you put multiple items inline
(like in the fiddle, and exactly what I want to do).
I'm, trying to make this button purely with CSS, but this is where I get
stuck. Does anyone have a suggestion how this can be done by using purely
CSS?