Div分享共同的垂直/水平区域

Question

https://jsfiddle.net/5ac2mjpd/53/

“在表格中显示数据”会在点击时移动其空间。有没有办法避免它？ 基本上我希望“下拉”右侧的内容崩溃，并且只要点击“在表格中显示数据”链接，表格中的内容就会展开。

<div class="cont">
    <select class="pull-left">
        <option>123456789 1234 123</option>
        <option>456</option>
    </select>
    <div class="pull-left in-block">
        <div class="side-header">
            <div>abc</div>
            <div>def</div>
         </div>
        <div class="side-content1">
            <div>ghi</div>
            <div>jkl</div>
            <div>mno</div>
        </div>
    </div>
    <div class="clear details1 adjust-pos">
        <span class="emulate-link"><i class="sprite-right"></i> show data in table</span>
    <div class="details1-content hide">
        <table>
             <thead>
                <tr>
                   <th>Heading 1</th>
                   <th>Heading 2 </th>
                   <th>Heading 3</th>
                </tr>
             </thead>
                <tbody>
                <tr>
                   <td>Text 1 </td>
                   <td>And a big text followed here</td>
                   <td>Text 3</td>
                </tr>

                <tr>
                   <td>Text 1 </td>
                   <td>And a big text followed here</td>
                   <td>Text 3</td>
                </tr>
          </tbody></table>
    </div>
    </div>

</div>

<div class="cont clear">
    <select class="pull-left">
        <option>123456789 1234 123</option>
        <option>456</option>
    </select>
    <div class="pull-left in-block">
        <div class="side-header">
            <div>abc</div>
            <div>def</div>
         </div>
        <div class="side-content2">
            <div>ghi</div>
            <div>jkl</div>
            <div>mno</div>
        </div>
    </div>
    <div class="clear details2 adjust-pos">
        <span class="emulate-link"><i class="sprite-right"></i> show data in table</span>
    <div class="details2-content hide">
        <table>
             <thead>
                <tr>
                   <th>Heading 1</th>
                   <th>Heading 2 </th>
                   <th>Heading 3</th>
                </tr>
             </thead>
                <tbody>
                <tr>
                   <td>Text 1 </td>
                   <td>And a big text followed here</td>
                   <td>Text 3</td>
                </tr>

                <tr>
                   <td>Text 1 </td>
                   <td>And a big text followed here</td>
                   <td>Text 3</td>
                </tr>
          </tbody></table>
    </div>
    </div>

</div>