Align input field with button in smaller screen go out of bound - html

Question

I'm trying to aligne an input field with a button at the bottom of a tchat.
Here is the result on normal screen size +15"
and here is the result on -15"
Html :
<div class="col footer">
<div class="divider"></div>
<div class="row footer-input input-container form-group">
<div class="input-field inline col s10 m10">
<input #messageInput type="text">
<label for="message">Tapez votre message</label>
</div>
<div class="col button-col s2 m2">
<a class="waves-effect btn blue"">
<i class="material-icons">send</i></a>
<app-loading-panel [visible]="isSending"></app-loading-panel>
</div>
</div>
</div>
Css :
div.divider {
margin-top: 2px;
}
div.footer {
position: absolute;
bottom: 0;
margin: 0;
width: 100%;
}
div.input-container {
vertical-align: middle;
padding-top: 10px;
}
input[type=text]:focus:not([readonly]) {
border-bottom: 1px solid #2196F3;
box-shadow: 0 1px 0 0 #2196F3;
}
input[type=text]:focus:not([readonly]) + label {
color: #2196F3;
}
div.footer-input {
margin-bottom: 0;
}
div.button-col {
height: 100%;
}
I'm not good with css, how can I have the input take all the place it can, the button be at the right and centered vertically and nothing going out of bound ?

Answer 1

this might help you from a basic perspective:
Have a container that's a flex box
Assign a flex-grow of 1 to the input
This will ensure the input takes up most of the space whilst the button remains on the right.
.container {
width: auto;
background: #ebebeb;
display: flex;
flex-direction: row;
}
.container input {
flex-grow: 1;
}
<div class="container">
<input type="text" placeholder="Some Stuff"/>
<button> Button </button>
</div>