I'm trying to group an input and a button. Basically the button need to be on the same row as input with no space between them
Because I need to support IE9, I'm using display: table.
.container{
border: 1px red solid;
width: 35rem;
}
.input-group {
border-collapse: separate;
display: table;
position: relative;
}
.input {
position: relative;
z-index: 2;
float: left;
width: 100%;
font-size: .875rem;
line-height: 1.5;
margin: 0 ;
display: table-cell;
}
.button {
color: #fff;
background-color: #0b0b0b;
border: 0;
padding: .375rem .75rem;
text-align: center;
}
<div class="container">
<div class="input-group">
<input class="input">
<button class="button">Get Data</button>
</div>
</div>