javascript - div を他の div の左端に配置する

Question

div .timedistance を .draggable div の左端に配置して、このようにすることはできますか?

デモ: http://jsbin.com/erofot/189

コード：

$('.draggable').hover(function(){
    $(this).find('.line').show();
                $(this).find('.timedistance').show();

}, function() {
    $(this).find('.line').hide();
      $(this).find('.timedistance').hide();


});      

      }
    });
          $(".draggable").each(function() {
   $(this).append("<div class='line'></div>");
               $(this).append("<div class='timedistance'></div>");

});

およびCSS:

.line
{
  display: none;   
  width:5px; height:200px; background:#ccc;
}
.timedistance
{
  display: none;   
  width:100px; 
  height:54px;
  background:#ccc;
}