How to position a SVG element under a textbox?

Question

I am trying to do two things:

1. Make a text input take all the space in a div. My current approach is left: 0; right: 0; but apparently it's not working.
2. Put a SVG in a relative position to the conainer div in a way that I can move it just under the text inpit (I'm working on a slider component in SVG).

You can see it in this JsFiddle

Any clues for the positioning? clear: both is of no use to send the SVG to the next line? Can I achieve a relative positioning from the container div element somehow?

UPDATE:

I've found a workaround for my positioning question (2). To use position: relative on the container div and position: absolute on both child elements (an input and a svg). See the updated JsFiddle.

Nevertheless, question (1) remains. How to make the text input fill the whole container div?

Answer 1

Try this to put the SVG on the next line:

            .container {
                width: 400px;
                height: 45px;
                background: gray;
            }

            .textfield {
                clear: both;
                float:left;
                margin-right:100px;
            }

            .slider {
                width: 200px;
                height: 15px;
                border: 1px solid #741;

            }

Answer 2

Re part #1. Why don't you just set your input text field to be the same size as the div?

.textfield {
    width: 400px;
    height: 45px;
    clear: both;
}

http://jsfiddle.net/M8UEv/8/

It also has the effect of moving the SVG under the text field.