Clickable button or glyphicon within list-group-item

Question

Right now I am trying to insert a glyphicon or button within a list-group-item. What I want is that when the user clicks anywhere within the list-group-item, they are linked to a certain page, but when they click the glyphicon or button, they link to another page. Why I try to do this, it keeps putting the glyphicon or button outside of the list-group-items box. Why is this? How can I fix this?

Much appreciated.

Code:

<div class="list-group">
            <a href="my_django_url" class="list-group-item">
                            <a href="another_django_url"><span class="glyphicon some-glyphicon"></span></a>
            </a>

Answer 1

here you go:

<div class="list-group">
    <li class="list-group-item">
        <a href="my_django_url">
           first link
        </a>
        <a href="another_django_url" class="icon">
            <span class="glyphicon glyphicon glyphicon-search"></span>
        </a>
    </li>
</div>

.icon {
    float: right;
}

fiddle: http://jsfiddle.net/9r14uuLw/