Jquery при расширении, поле ввода не остается рядом с меткой

Приложил ссылку для моего кода. Я хотел, чтобы окно ввода было рядом с моей меткой, когда я нажимаю на нее. но так или иначе он оставался ниже этого. И как сделать якорьное слово рядом с моим "кликом" перед расширением? и скрытые при расширении?

http://jsfiddle.net/7eu5Q/

<div id="headdiv">
    <ul>
        <li id="headsearch">
            <label style="padding:5px 30px;display:block;">click</label>
            <div id="hidewrap">
                <form>
                    <input type="text" />
                </form>
            </div><a href="#">Word</a>

        </li>
    </ul>
</div>

#headdiv {
    float:left;
    width:500px;
    background:blue;
    display:block;
    padding:20px 30px;
}
#headdiv ul {
    padding:0;
    margin:0;
}
#headdiv ul li {
    list-style-type:none;
}
#headsearch {
    width:112px;
    background:white;
    height:30px;
}
#hidewrap {
    display:inline;
    display:none;
}
#hidewrap form {
    display:inline;
}
#hidewrap input {
    width:400px;
}

$(function () {
    $("#headsearch").click(function () {
        $(this).animate({
            width: '500px'
        }, 200).css("background-color", "white");
        $("#searchA").animate({
            width: '170px'
        }, 200).css({
            'color': '#4d4d4d'
        });
        $('#hidewrap').show(200);
    });

    $("#headsearch").mouseleave(function () {
        $(this).animate({
            width: '112px'
        }, 200).css("background-color", "white");
        $("#searchA").animate({
            width: '68px'
        }, 200).css({
            'color': '#fff'
        });
        $('#hidewrap').hide(200);
    });
});