html - How to make <input> and <a> element inline in a <div> -

i have div containing input , a element:

.wrapper {    width: 300px;    display: inline-block;  }  .custom-input {    display: block;    width: 100%;  }  .button {    width: 20px;    height: 20px;    background-color: #ccc;    display: block;  }

<div class="wrapper">    <input class="custom-input" type="text" />    <a class="button"></a>  </div>

here's jsfiddle.

i want input , button inline. input button has 100% width of wrapper. in cases, want remove button. input has 100% width of wrapper div.

it inline when use inline-flex wrapper. want able run on old browsers (ie 8-9), , want input , element have 100% width of wrapper.

how can it?

using width: 100% on input make take horizontal space available, pushing button line below.

this should work :

.wrapper{     width: 300px;     display: inline-block; }  .custom-input{     display: inline-block; }  .button{     width: 20px;     height: 20px;     background-color: #ccc;     display: inline-block; } 

here's updated jsfiddle : http://jsfiddle.net/k6yhtf92/3/