jquery - ヘッダー jQuery Mobile へのスイッチの追加

Question

ヘッダーにスイッチを追加しようとしています。正常に動作していますが、スイッチが次の行にあり、タイトルの右側に配置したい

コード：

<div data-role="page" id="moreevents">
    <div data-role="header" data-position="fixed">
        <a href="#defaultclub" data-icon="arrow-l" data-theme="b" onclick="getClubData(curClub)" id="backtoclub">Back</a>
        <h1>All Events</h1>
        <div align="right">
            <select name="switch" id="alleventsswitch" data-role="slider">
            <option value="off">No Past</option>
            <option value="on">Past</option>
            </select>
        </div>
    </div>
</div>

作業例:

http://jsfiddle.net/Y9ntF/