Bootstrap list with close button on right

Question

I'm trying to draw some elements with bootstrap but I'm stuck and I need a little bit of help to see how can I fix that. My problem is close related to html scheme and looks like :

<div class="container">
    <ul class="list-group">
        <li class="list-group-item">
        <ul class="list-group">
            <li class="list-group-item items-orange">This is option one from pair one</li>
            <li class="list-group-item items-blue">This is option two from pair one</li>
        </ul>
        <button class="btn btn-sm btn-danger" type="button">Close Button</button>
        </li>
    </ul>
</div>

so how can I put that button from bottom to right in continuation of li elements like in picture below:

fiddle:

Answer 1

I had to add a few classes to your markup. Notice how it scales properly with different browser widths.

http://jsfiddle.net/NateW/ZurAk/233/

HTML:

<div class="container">
<div class="container">
    <ul class="list-group">
        <li class="list-group-item custom">
        <ul class="list-group options">
            <li class="list-group-item items-orange">This is option one from pair one</li>
            <li class="list-group-item items-blue">This is option two from pair one</li>
        </ul>
            <button class="btn btn-sm btn-danger side-btn" type="button">Close Button</button>
        </li>
    </ul>
</div>
</div>

CSS:

body{padding:40px;}
li.list-group-item {
    overflow:auto;
}
.side-btn{
    float:left;
    width:15%;
    white-space: normal;
    position: absolute;
    top:10px;
    bottom: 30px;
}
li.custom {
    padding:0;
}
ul.options {
    width: 85%;
    float: left;
    padding: 10px 0px 10px 15px;
}