HTML SPAN тег Растянуть до доступной ширины

Question

У меня есть следующий HTML-код с тегом «span», который содержит поле «input» и тег «span» рядом:

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

Я бы хотел, чтобы дочерний тег "span" растягивался, чтобы заполнить доступную область между правой стороной файла "input" и правой стороной его родительского тега "span". Я не хочу, чтобы он заполнял всю область родительского тега «span» и, таким образом, заполнял поле «input». Это возможно с помощью CSS?

Вот мой текущий CSS, если это поможет:

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;
}

Спасибо за ваше время,
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>