So, I have a form, which looks like this:
![Snapshot of the form!](https://i.stack.imgur.com/r0dbZ.gif)
And, as you can see, the "Opis" is on the bottom, however it should be on the top. I'm trying to fix it *properly* (without using float and a fixed height) for the past hour. I'd prefer a solution which doesn't involve float elements, but if it can't be avoided I won't be too picky.

The CSS:
--------

```
#main {
    width: 800px;
    display: table;
}

selection {display: table-row}

section > * {
    display: table-cell;
    vertical-align: baseline;
    border-bottom: 1px solid #EEE;
}

#main h3 {
    font-weight: bold;
    font-size: 110%;
    width: 130px;
    padding: 10px;
    text-transform:capitalize
}
#main div {
    width: 650px;
    padding-top: 17px;
    padding-bottom: 20px;
}

```

The HTML excerpt
----------------

```
<section>
    <h3><label for="date">Datum</label></h3>
    <div><input type="text" id="date" name="datum"/></div>
</section>
<section>
    <h3><label for="vp">Vrijeme</label></h3>
    <div><input type="text" id="vp" name="vp"/><br><br><input type="text" name="vz"/></div>
</section>
<section>
    <h3>Opis</h3>
    <div><textarea name="opis" rows="5" cols="50" style="resize: none;"></textarea></div>
</section>
<section>
    <h3>Logo</h3>
    <div><select id="combobox">
        <option value="">Select one...</option>
            <option value="...">...</option>
    </select></div>
</section>

```

Thanks! :D