Html 如何制作这两个div'；谁挨着谁？

我得到了这个HTML：

<div style="float: left; width: 600px; overflow: hidden;">
    <span class="text_vert"> Select Countries : </span><br />
    <div style="float: left;">
        <s:select style="width: 200px; height: 300px;" onchange="reload()"
             headerKey="-1" headerValue="Country Select" list="couList"
             listKey="idCountry" listValue="label" id="countryId" multiple="true"
             name="countryId">
        </s:select>
    </div>
    <span class="text_vert"> Select Languages : </span><br />
    <div style="overflow: hidden; position:relative;">
        <s:select style="width: 200px; height: 300px; overflow: hidden;"
             headerKey = "-1" headerValue="Language Select" list="langList"
             listKey="id" listValue="label" id="langId" multiple="true"
             name="langId">
        </s:select>
    </div>
</div>

选择国家：

选择语言：

我查阅了许多教程，但无论我做什么，我总是得到类似的结果：

如何在一行中对齐这两个元素，使第二个列表不在第一个列表的下方？

尝试以下方法：

<div style="float: left; width: 600px; overflow: hidden;">
    <div style="float: left;">
    <span class="text_vert"> Select Countries : </span><br />
        <s:select style="width: 200px; height: 300px;" onchange="reload()"
             headerKey="-1" headerValue="Country Select" list="couList"
             listKey="idCountry" listValue="label" id="countryId" multiple="true"
             name="countryId">
        </s:select>
    </div>

    <div style="float: left;">
        <span class="text_vert"> Select Languages : </span><br />
        <div style="overflow: hidden; position:relative;">
            <s:select style="width: 200px; height: 300px; overflow: hidden;"
                 headerKey = "-1" headerValue="Language Select" list="langList"
                 listKey="id" listValue="label" id="langId" multiple="true"
                 name="langId">
            </s:select>
        </div>
    </div>
</div>

选择国家：

选择语言：

更多说明：您的

float:left

应该包含所有应该位于同一Y的HTML