Javascript 追加一个div，使其显示在另一个div旁边

我正在尝试使用Jquery拖放创建“匹配”效果

我有这个html-

<div class="questionMatch">
    <text class="matchingText clear">Q1</text>
    <div class="dropAcceptor floatRight"></div>
</div>
<div class="questionMatch">
    <text class="matchingText">Q2</text>
    <div class="dropAcceptor"></div>

</div>
<div class="questionMatch">
    <text class="matchingText">Q3</text>
    <div class="dropAcceptor"></div>

</div>
<div class="questionMatch">
    <text class="matchingText clear">Q4</text>
    <div class="dropAcceptor"></div>

</div>
<div class="answerPane">
    <div class="answerMatch floatRight">
        <text class="matchingText">Match1</text>
    </div>
    <div class="answerMatch">
        <text class="matchingText">Match2</text>

    </div>

}))

这会正确地附加元素，但它显示在.questionMatch的上方/不在其旁边

我能做些什么来达到这个效果

正在使用的CSS-

.floatLeft{
    float:left;
}
.floatRight{
    float:right;
}
.clear{
    clear:both;
}

JSFIDDLE显示问题-

更新- 控制台中的检查显示Jquery拖放在样式attr中添加了定位-我已经删除了它，现在答案匹配显示在问题下面。什么是css使其显示在右侧？当我向右浮动时，它会显示在浏览器的右端

使用

---

用div标记替换文本标记如何：

<div class="matchingText floatLeft"></div>

或者，为了与答案格式保持一致：

<div class="QA">
<div class="questionMatch floatLeft"><text class="matchingText clear">Q1</text></div>
<div class="dropAcceptor floatRight"></div>
</div>

Q1

你能用它发布一些css吗？也许可以设置一个JSFIDLE？我能在JSFIDLE中放入Jquery ui吗？我看不到这样的选项，在任何情况下——添加CSSYE，您都可以将jQuery放在JSFIDLE中。在左边选择它。@praks5432只需添加一个链接到jQuery UIok的脚本标记，我已经删除了我的答案。问题是DragTable不仅仅是附加div，它还使用左和右的值来定位它。仍然显示在顶部，而不是元素旁边。问题是-当我这样做时，问题开始出现在同一行上，这不应该发生。请尝试我答案的第二部分好吗？它应该把问题放在不同的行上。

<div class="matchingText floatLeft"></div>

floatLeft {float:left;}

<div class="QA">
<div class="questionMatch floatLeft"><text class="matchingText clear">Q1</text></div>
<div class="dropAcceptor floatRight"></div>
</div>