How can I align two divs horizontally?

Float the divs in a parent container, and style it like so:

.aParent div {
    float: left;
    clear: none; 
}
<div class="aParent">
    <div>
        <span>source list</span>
        <select size="10">
            <option />
            <option />
            <option />
        </select>
    </div>
    <div>
        <span>destination list</span>
        <select size="10">
            <option />
            <option />
            <option />
        </select>
    </div>
</div>

Nowadays, we could use some flexbox to align those divs.

.container {
    display: flex;
}
<div class="container">
    <div>
        <span>source list</span>
        <select size="10">
            <option />
            <option />
            <option />
        </select>
    </div>

    <div>
        <span>destination list</span>
        <select size="10">
            <option />
            <option />
            <option />
        </select>
    </div>
</div>

Tags:

Html

Css

Recent Posts