html - Input text & button with span inline -

we must display input-field , button inner span on same line. button resp. inner span must have width:auto, input text must fill remaining width.

fiddle: http://jsfiddle.net/1xfxpm55/

html:

<div class="wrapper">     <input type="text">     <button> <span>auswählen</span>      </button> </div> 

css:

.wrapper {     width:100%;     display: table; } input {     display: table-cell;     width: 100%;     float: left; } button {     display: table-cell;     width: auto; } 

thanks hints

put button in div small width:

* {      box-sizing:border-box;  }  *:before,   *:after {      box-sizing:border-box;  }  .c1 {      display: table-cell;      padding-right:10px;  }  input{      width:100%;  }  .c2 {      display: table-cell;      padding-left:10px;      width:1%  }

<div class="wrapper">      <div class="c1">          <input type="text">      </div>      <div class="c2">          <button><span>auswählen</span></button>      </div>  </div>