jquery-ui - アコーディオンのタブを左に、コンテンツを右に

Question

私はjqueryアコーディオンを使用しています。ユーザーがヘッダーをクリックすると、コンテンツが右側に表示されるように、聴取者をリストのように左側に配置したいと考えています。jquery uiアコーディオンを使用してこれを達成できませんでした。それは私が必要としない聞き手の下のコンテンツを示しています..

これを見てください

http://jsfiddle.net/qkXUJ/

<div class="accordion">
    <h3><a>tab 1</a></h3>
    <div>Lorem ipsum dolor sit amet... </div>
    <h3><a>tab 2 </a></h3>
    <div>Lorem ipsum dolor sit amet... </div>
</div>
h3{
    float: left;
}

最初は左に聞き手が表示されますが、2 番目のヘッダーをクリックすると上に移動します。私はそれを最初の聴衆の下にとどめたいです。

これを達成するのを手伝ってください。

前もって感謝します