Align button and text in collapse Bootstrap

Question

I try to use the element Collapse in Bootstrap but i have i little problem.

This is an image for exemple

I try to align my text an my button trash in the same line. As you can see it's shifted.

how to solve this problem?

<form method="post" action="wbx.php">
    <div class="accordion" id="accordion2">
        <div class="accordion-group">
            <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                Collapsible Group Item #1
                </a>
                <button class="btn btn-danger pull-right" type="submit" name="supprAlias" value="'.$idValue.'">
                    <i class="icon-trash icon-white"></i>
                </button>
            </div>
            <div id="collapseOne" class="accordion-body collapse in">
                <div class="accordion-inner">
                    Anim pariatur cliche...
                </div>
            </div>
        </div>
        <div class="accordion-group">
            <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
                Collapsible Group Item #2</a>
                <button class="btn btn-danger pull-right" type="submit" name="supprAlias" value="'.$idValue.'">
                    <i class="icon-trash icon-white"></i>
                </button>

            </div>
            <div id="collapseTwo" class="accordion-body collapse">
                <div class="accordion-inner">
                    Anim pariatur cliche...
                </div>
            </div>
        </div>
    </div>
</form>

In my Controler in another page :

if(!empty($_POST['supprUserAlias']))
{
    $savant->deletesUserAlias = $gemel->setDeleteUserAlias($_POST['supprUserAlias'], $username, $domain, $serverMail);
    header('Location: wbx.php?user='.$username.'#alias');
    exit;
}

EDIT

Finally find the solution :

Pu the <button> betweeen <div class="accordion-group"> and <div class="accordion-heading">

<form method="post" action="wbx.php">
        <div class="accordion" id="accordion2">
            <div class="accordion-group">
                   <button class="btn btn-danger pull-right" type="submit" name="supprAlias" value="'.$idValue.'">
                        <i class="icon-trash icon-white"></i>
            </button>
                <div class="accordion-heading">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                    Collapsible Group Item #1
                    </a>
                </div>
                <div id="collapseOne" class="accordion-body collapse in">
                    <div class="accordion-inner">
                        Anim pariatur cliche...
                    </div>
                </div>
            </div>

Answer 1

You just need to put the button inside the link (a) tag like this. I think you should also make the button smaller (btn-mini) so that it fits nicely inside the collapse link.

<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
    Collapsible Group Item #1 <button class="btn btn-mini btn-danger pull-right" type="submit"><i class="icon-trash icon-white"></i></button>
</a>

Demo on Bootply

EDIT-

The click of the button can be handled like..

$('.accordion-toggle .btn').click(function(e){
    e.preventDefault();
    alert("button!");
    return false;
})