Positioning an element under another element

Positioning an element under another element

I have a title and subtitle. The title is draggable and if the user clicks a button, I'd like to center the subtitle under to where they just dragged the title. Below is the markup and code I am trying to do this, but it does not work. Can someone help?

  2. <div id="titleDiv" class="draggable"><label id="title" class="title">Team Title Here</label></div>
  3. <div id="subtitleDiv"><label id="subtitle" class="subtitle">Team subtitle that might be really really long</label></div>

  5. $(".alignSubtitle").click(function () {
      var title = $('#titleDiv').position();
        var alignmentText = $(this.name.toString());
          $('#subtitleDiv').css("text-align", '');
            $('#subitleDiv').css('position', 'absolute');
              $('#subtitleDiv').top = title.top + 50 + 'px';
                $('#subtitleDiv').left = title.left + 'px';

                    $("#subtitle").css("text-align", alignmentText);
                      });