HTML SPAN tag Stretch to Avaliable Width

Question

I have the following HTML, with a "span" tag which contains an "input" field and a "span" tag side-by-side:

<span class="container">
  <input name="firstName" id="firstName" type="text">
  <span class="tip">Enter your first name</span>
</span>

I would like the child "span" tag to stretch to fill the avaliable area between the right side of the "input" file and the right side of its parent "span" tag. I do not want it to fill the entire area of the parent "span" tag, and, thus, crowd the "input" field. Is that possible with CSS?

Here is my current CSS, if that helps:

span.container {
  font-size:14px;
  border:1px solid #22C3EB;
  border-radius:5px;
  padding:0px 10px 0px 10px;
  width:200px;
  display:block;
}

input[type="text"], input[type="password"], textarea {
  background: none;
  border: none;
  width:200px;
  font-size:14px;
  padding:11px 10px 11px 0px;
}

span.tip {
  position:absolute;
  top:inherit;
  padding:11px 0px 11px 10px;
  display:none;
}

Thank you for your time,
spryno724

Answer 1

http://jsfiddle.net/pramendra/CmgvE/1/

span{

}
span span{
    width:100%;
    background:#f00;
    display:inline-block;    

}
span input{
    float:left;
}


<span>
    <span>
        <input type="text" /> 
    some text
    </span>
</span>