Как заполнить тег с оставшейся шириной в html?

Question

Я пытаюсь сделать в 1 строке, вход и две кнопки. Ширина двух кнопок должна обернуть содержимое, а затем вход должен заполнить ширину его родителя. Это то, что у меня есть сейчас

 <input id="input-field" style="display:inline-block; width:60%;"></input> 
     <button id="sticker-button" style="display:inline-block;">☺</button> 
     <button id="send-button" style="display:inline-block;">➤</button> 

Но я не могу найти css, чтобы сделать тег ввода, заполнить оставшуюся ширину. В настоящее время я просто поставлю 60%, но это явно не работает. Как если бы это был андроид, у меня была бы ширина кнопок wrap_content, а ширина ввода была бы fill_parent.

Кто-нибудь знает, как это сделать?

Благодаря

Answer 1

я решил его с этим

 <div style="display:flex;"> 
      <input id="input-field" style="width:100%;"></input> 
      <button id="sticker-button">☺</button> 
      <button id="send-button">➤</button> 
     </div>