Appending a div so that it appears next to another div
<p>I'm trying to create a 'matching' effect using Jquery Drag and Drop.</p>

<p>I have this html -</p>

<pre><code>&lt;div class="questionMatch"&gt;
    &lt;text class="matchingText clear"&gt;Q1&lt;/text&gt;
    &lt;div class="dropAcceptor floatRight"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class="questionMatch"&gt;
    &lt;text class="matchingText"&gt;Q2&lt;/text&gt;
    &lt;div class="dropAcceptor"&gt;&lt;/div&gt;

&lt;/div&gt;
&lt;div class="questionMatch"&gt;
    &lt;text class="matchingText"&gt;Q3&lt;/text&gt;
    &lt;div class="dropAcceptor"&gt;&lt;/div&gt;

&lt;/div&gt;
&lt;div class="questionMatch"&gt;
    &lt;text class="matchingText clear"&gt;Q4&lt;/text&gt;
    &lt;div class="dropAcceptor"&gt;&lt;/div&gt;

&lt;/div&gt;
&lt;div class="answerPane"&gt;
    &lt;div class="answerMatch floatRight"&gt;
        &lt;text class="matchingText"&gt;Match1&lt;/text&gt;
    &lt;/div&gt;
    &lt;div class="answerMatch"&gt;
        &lt;text class="matchingText"&gt;Match2&lt;/text&gt;

    &lt;/div&gt;
</code></pre>

<p>I want it so that when I drag a .answerMatch and drop it onto a .questionMatch, the .answerMatch is appended to the .questionMatch in such a way that it appears next to the text of that .questionMatch.</p>

<p>I've tried this JS</p>

<pre><code>$(document).ready(function(){
$(".questionMatch").droppable({accept:".answerMatch",
    drop:function(event,ui){
        $(this).find(".dropAcceptor").append($(ui.draggable));
        }
    }

    )
$(".answerMatch").draggable();
</code></pre>

<p>});</p>

<p>And that appends the element properly, but it appears way above the .questionMatch/not next to it. </p>

<p>What can I do to achieve this effect?</p>

<p>CSS that's being used-</p>

<pre><code>.floatLeft{
    float:left;
}
.floatRight{
    float:right;
}
.clear{
    clear:both;
}
</code></pre>

<p>JSFIDDLE SHOWING PROBLEM-
<a href="http://jsfiddle.net/qMxxF/1/" rel="nofollow">http://jsfiddle.net/qMxxF/1/</a></p>

<p>UPDATE-
Inspection in console shows that Jquery drag drop adds positioning in a style attr - I've removed that, and the answerMatch appears below the question now. What is the css to make it appear to the right? When I do a float right, it appears at the right end of the browser. </p>
