向jQuery-Mobile标题添加开关

我正在尝试向标题添加一个开关。它工作正常，但开关在下一行，我希望它在标题的右边

代码：

所有事件
没有过去
过去的

工作示例：

在这里查看演示

您需要减少默认的

h1

宽度和边距，以便为

开关提供空间

HTML
<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>

<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 id="myTitle">All Events</h1>
        <span id="mySelect">
            <select name="switch" id="alleventsswitch" data-role="slider">
            <option value="off">No Past</option>
            <option value="on">Past</option>
            </select>
        </span>
    </div>
</div>

#myTitle{
    float:left;
    width:20%;
    margin: .6em 0 .8em 40%;
}
#mySelect{
    float:right;
    z-index: 1;
}