将搜索栏扩展到左侧

Question

我正在使用this。

代码工作正常，我已经毫无问题地实现了它。但有没有办法让搜索栏向左扩展而不是默认右边？

我的Html：

<div class="col-md-4">
    <!-- dropdown -->
    <form id="search" action="#" method="post">
        <div id="label"><label for="search-terms" id="search-label">search</label></div>
        <div id="input"><input type="text" name="search-terms" id="search-terms" placeholder="Enter search terms..."></div>
    </form>
</div>

Css：

#label {
    width: 29px;
    height: 29px;
    position: relative;
    z-index: 20;
}
#label label {
    display: block;
    width: 29px;
    height: 29px;
    background: url("../images/search_icon.png") 0 0;
    font-size: 0;
    color: rgba(0, 0, 0, 0);
    text-indent: -9999px;
    cursor: pointer;
}
#label label:hover {
    background: url("../images/search_icon.png") -60px 0
}
#label.active label {
    background: url("../images/search_icon.png") -60px 0
}
#input {
    position: absolute;
    top: 0;
    left: 60px;
    width: 450px;
    height: 60px;
    z-index: 5;
    overflow: hidden;
}
#input input {
    display: block;
    position: absolute;
    top: 0;
    left: -450px;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0 10px;
    border:1px solid #e9e9e9;
    background-color: #fff;
    color: #fff;
    font-size: 18px;
    -webkit-backface-visibility: none;
    -moz-backface-visibility: none;
    -ms-backface-visibility: none;
    backface-visibility: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-transition: left 0;
    -moz-transition: left 0;
    -ms-transition: left 0;
    -o-transition: left 0;
    transition: left 0;
}
#input input:focus {
    outline: none
}
#input.focus {
    z-index: 20
}
#input.focus input {
    left: 0;
    -webkit-transition: left 0.3s;
    -moz-transition: left 0.3s;
    -ms-transition: left 0.3s;
    -o-transition: left 0.3s;
    transition: left 0.3s;
}

JS :(在页脚包含文件中）

(function(window){

    // get vars
    var searchEl = document.querySelector("#input");
    var labelEl = document.querySelector("#label");

    // register clicks and toggle classes
    labelEl.addEventListener("click",function(){
        if (classie.has(searchEl,"focus")) {
            classie.remove(searchEl,"focus");
            classie.remove(labelEl,"active");
        } else {
            classie.add(searchEl,"focus");
            classie.add(labelEl,"active");
        }
    });

    // register clicks outisde search box, and toggle correct classes
    document.addEventListener("click",function(e){
        var clickedID = e.target.id;
        if (clickedID != "search-terms" && clickedID != "search-label") {
            if (classie.has(searchEl,"focus")) {
                classie.remove(searchEl,"focus");
                classie.remove(labelEl,"active");
            }
        }
    });
}(window));

它可以响应吗？

这里是a fiddle