2列布局"显示/隐藏"函数，文本流到第二列

我是新来的，绝不是专业的web开发人员，所以如果我错过了一些明显的东西，请道歉。

我试图创建一个两列布局，每个都有"显示/隐藏"功能来显示摘要。然而，当我点击"显示"时，文本会进入下一列。我的代码是这样的:

 <div id="content" class="clearfix" style="margin:0px auto; width:70%">
    <h2>Session 1</h2>
      <div id="column1" style="float:left; margin:0; width:50%;"><span class="content">
        <p><strong><span lang="EN-US" xml:lang="EN-US">Panel 2A:</span></strong><span lang="EN-US" xml:lang="EN-US"> <strong><em>Visual arts</em></strong></span></p>
        <p><b>Sp. 1 NAME</b> - <br />
          &lsquo;PAPER NAME&rsquo;<br />
          <a href="#" id="show_abstract_1" onClick="InsertContent('abstract_1');InsertContent('hide_abstract_1');RemoveContent('show_abstract_1');return false;">view abstract</a><a href="#" id="hide_abstract_1" onClick="RemoveContent('abstract_1');InsertContent('show_abstract_1');RemoveContent('hide_abstract_1');return false;" style="display:none;">hide abstract</a>
          <span id="abstract_1" style="color:#312B85;display:none;"><br />TESTTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest</span></p>
    </div>
<div id="column3" style="float:left; margin:0;width:50%"><span class="content">
  <p><strong><span lang="EN-US" xml:lang="EN-US">Panel 2B:</span></strong><span lang="EN-US" xml:lang="EN-US"> <strong><em>Architecture and applied arts</em></strong></span></p>
  <p align="left"><strong>Sp. 5 NAME</strong><br />
    &lsquo;PAPER NAME&rsquo;<br />
    <a href="#" id="show_abstract_2" onClick="InsertContent('abstract_2');InsertContent('hide_abstract_2');RemoveContent('show_abstract_2');return false;">view abstract</a><a href="#" id="hide_abstract_2" onClick="RemoveContent('abstract_2');InsertContent('show_abstract_2');RemoveContent('hide_abstract_2');return false;" style="display:none;">hide abstract</a>
    <span id="abstract_2" style="color:#312B85;display:none;"><br />
   TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest</span></p>
</div>

这段代码是jsfiddle在这里

任何帮助建议将不胜感激。