チェックボックスがオンのときにチェックボックスラベルを移動する

ラベルがチェックされた後、チェックボックスラベルを移動するためのヘルプを探しています。それが始まるとき、ラベルはコードの真ん中にあります。ただ、クリックしてから動かしたいのですが。持っていると思っていたのですが、今はそう見えません。手を貸してくれる人はいますか？

JSFiddle：http：//jsfiddle.net/50c419nL/4/

マークアップ：

<div id="vera-gallery">
    <div class="vera-check">
        <label for="vone">e x i l e</label>
        <input type="checkbox" id="vone" name="main" />
        <div class="vera-bar">I'm controlled by toggle. No JavaScript!</div>
    </div>
</div>

CSS：

#vera-gallery {
    width: 500px;
    height: 500px;
    overflow: hidden;
    background-image:url(http://i.imgur.com/ZOmzzeE.png);
    margin: auto;
    position: relative;
}
#vera-gallery input[type=checkbox] {
    display: none;
}
.vera-check {
    width: 500px;
    height: 500px;
}
.vera-check input[type=checkbox] {
    position: absolute;
    top: 50%;
    left: 50%;
}
.vera-check input[type=checkbox]:checked ~ .vera-bar {
    margin-left: 0;
}
.vera-check label {
    cursor: pointer;
}
.vera-check label[for=vone] {
    top: 235px;
    width: 80px;
    text-align: center;
    font-family: oxygen;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    text-align: center;
    padding: 10px;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.8);
    left: 200px;
    border: 1px solid #fff;
}
.vera-check input[type=checkbox]:checked ~ label[for=vone] {
    top: 10px;
    left: 10px;
}
.vera-bar {
    width: 470px;
    padding: 15px;
    background-color: rgba(0, 0, 0, 0.8);
    float: left;
    top: 0px;
    height: 100%;
    font-family: oxygen;
    font-weight: bold;
    color: #fff;
    margin-left: -500px;
    transition: 0.5s all ease;
    -webkit-transition: 0.5s all ease;
    -moz-transition: 0.5s all ease;
    -ms-transition: 0.5s all ease;
    -o-transition: 0.5s all ease;
}
.vera-ships {
    width: 225px;
    padding: 15px;
    background-color: rgba(0, 0, 0, 0.8);
    float: left;
    top: 0px;
    height: 100%;
    font-family: oxygen;
    font-weight: bold;
    color: #fff;
    margin-left: -255px;
    transition: 0.5s all ease;
    -webkit-transition: 0.5s all ease;
    -moz-transition: 0.5s all ease;
    -ms-transition: 0.5s all ease;
    -o-transition: 0.5s all ease;
}
.vera-two {
    position: absolute;
}
.vera-two .vera-chk {
    float: left
}
.vera-two input[type=checkbox] {
    display: none
}