I am trying to place an input field and a button on the same line. The button should have a fixed size, while the form should fill the available space. Despite my attempts, the button ends up lower than the input field. How can I resolve this issue?
https://i.sstatic.net/JkjJc.png
CSS:
.input-bar {
display: table;
width: 100%;
}
.input-bar-item {
display: table-cell;
}
.input-bar-item > button {
margin-left: 5px;
}
.width100 {
width: 100%;
}
HTML:
<div class="input-bar">
<div class="input-bar-item width100">
<form>
<div class="form-group">
<input class="form-control width100">
</div>
</form>
</div>
<div class="input-bar-item">
<button class="btn btn-info">MyButton</button>
</div>
</div>