Question: HTML:

```
<div id="options">
    <ul>
        <li>
            <label for="input_color">Input Color</label>
            <input type="text" id="input_color">
        </li>
        <li>
            <label for="output_color">Output Color</label>
            <input type="text" id="output_color">
        </li>
        <li>
            <label for="pixels">Pixels to the left</label>
            <input type="text" id="pixels">
        </li>
        <li>
            <label for="pixels">Speed (in second)</label>
            <input type="text" value="0.02" id="speed">
        </li>
        <li>
            <input type="submit" value="Reset" class="submit">
        </li>
    </ul>
</div>

```

CSS:

```
div#options ul, div#options li{
    margin:0; 
    padding:0; 
    list-style:none;
}
div#options li{
    clear: both;
    list-style:none;
    padding-bottom:30px;
    white-space: nowrap;
}

div#options input{
    float:left;
    width: 50%;
}
div#options label{
    float:left;
    width: 50%;
}

```

![image](https://i.stack.imgur.com/VploG.png)

I need to display input next to the label, but it always appears under it - how to fix it?

Answer: 
Remove the padding and margin and borders from your inputs and labels, or make them both less than 50% wide.

They can't both fit side-by-side, the box model will make (at least the `<input>`) wider than 50%: The space it occupies will be 50% the width of its container, *plus* its padding, *plus* its border.
Keep your `li`'s in `div` to get them side-by-side.
and give `width:100%;` instead of `width:50%;`.

```
div{width:50%;float:left;}

```

**[Fiddle](http://jsfiddle.net/6zVt2/1/)**