如何用html中的剩余宽度填充标签？

Question

I am trying to make in 1 line, an input and two buttons. The two button's width should wrap the content, and then the input should fill the width of its parent. This is what I have currently

        <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>

But I can't find the css to make a input tag fill the remaining width. Currently I just put 60%, but this clearly does not work. Like if this was android, I would have the buttons width be wrap_content and the input's width be fill_parent .

Does anyone know how to do this?

Thanks

Answer 1

I solved it with this

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