I have a list with `<li>` 

I want to get a delete div to slide in when a user clicks the X.

I want the red div to be able to grow with its content, and the title text to have ellipsis.

If you look at the example, the first `<li>` is the start result I want, and the second is the end result I want.

[Example](http://jsbin.com/badul/4/edit)

How can I do this?

[Example 2](http://jsbin.com/badul/6/edit)