Hi I've got the following code:

```
<div class="hint-wrapper">
    <form>
        <label>Suggestions:</label>
        <input type="text" id="input-field">
        <div class="datalist-wrapper">
            <select class="availableDataSelection" multiple=""></select>
        </div>
    </form>
</div>

```

It looks like this:  

[![enter image description here](https://i.stack.imgur.com/vgSWU.png)](https://i.stack.imgur.com/vgSWU.png)

Now I want align the selection list (datalist-wrapper element) under the input field. It should also have the same width as the input field.

I already tried several CSS stuff like this:

```
.datalist-wrapper {
    float: left;
}

#input-field {
    float: left;
}

```

I want to achieve this:  

[![enter image description here](https://i.stack.imgur.com/L7EnM.png)](https://i.stack.imgur.com/L7EnM.png)