带跨距的内联LI

我在每个列表项的DIV内的链接旁边有一个名为Delete的按钮。要确认,我有另一个按钮,它应该出现在“确认删除”旁边。单击该按钮后,它将被发回服务器。“删除”显示正确,但“确认”会下降到下一行,而不是显示在同一行。

资料来源:

<ul>
    <li>
        <div style="font-size: x-large;">
            <a href="/item/detail/123>Rearden Steel</a> 
        </div>

        <button type="button" name="delete" value="Delete" onclick="ShowDeleteButton('Delete123', this);" class="btn btn-default btn-primary disableOnClickSubmit">Delete</button>

        <span id="Delete123" style="display: none;">
            <form action="/item/ItemDelete" method="post">
                <input id="id" name="id" type="hidden" value="123" />                            
                <button type="submit" name="deleteConfirm" value="DeleteConfirm" class="btn btn-default disableOnClickSubmit">Confirm Delete</button>
            </form>                
        </span>
    </li>
    <li> ... </li>
<ul>

我需要应用什么样式才能使“确认删除”按钮与“链接和删除”按钮显示在同一行?

我正在使用Bootstrap 3。

Bootply示例: http://www.bootply.com/VsU984gbLs