У меня есть разметка html с меткой и полем ввода. Однако по деловым причинам мне нужно показать метку и поле ввода на той же строке и скрыть текст заполнителя. Конечный результат должен выглядеть так, как будто текст-заполнитель остался на месте. Пример здесь: http://jsfiddle.net/XhwJU/

Вот разметка для справки:

 


   
 test 
   

       Access Code: 
      
  
      

   

​ ​

Вот используемые стили:

.inputdata {
  border: thin solid gray;
  padding: 0.1em;
  margin: 0.1em;
  vertical-align: middle;
}

div .inputdata label {
  width:auto;
  float:left;
  color: gray;
  line-height: 2;
  padding-top: .4em;
}

input[type='text']{
  overflow:hidden;
  line-height: 2;
  box-shadow: none;
  border:none;
  vertical-align: middle;
  background:none;
  width:100%;
}

.clear {
  clear: both; 
  height: 1px; 
  overflow: hidden; 
  font-size:0pt; 
  margin-top: -1px;
}​

Как вы можете видеть в jsfiddle, метка и ввод отображаются в отдельных строках. Я хочу, чтобы метка и ввод отображались в одной строке независимо от ширины экрана. Метка должна иметь фиксированный размер, позволяющий уместить содержимое в одну строку, а ввод должен занимать остальную часть ширины экрана.

Буду признателен за любую помощь.