I want to place html elements in one row, side by side

Question

I am trying to get this output : [1]: https://i.sstatic.net/QfaLl.jpg But instead i get this : [2]: https://i.sstatic.net/sqQtT.jpg I want to place all elements in one row, side by side. They must have same height.

#panel{
    position: absolute;
    bottom: 0;
    margin: 5px;
    height: 20%;
    width: 100%;
}

#send{
    height: 100%;
    width: 20%;
    border-width: 0;
    float: right;
    border-radius: 10px;
}

#message{
    height: 100%;
    width: 50%;
    border-width: 0;
    border-radius: 10px;
    background-color: gray;
}

#upload_img{
    height: 100%;
    width: 20%;
}

<div id="panel">
    <input type="text" id="message">
    <img src="#" id="upload_img">
    <button id="send">გაგზავნა</button>
</div>

Answer 1

Just add display: flex; to #panel to align them

#panel{
    position: absolute;
    bottom: 0;
    margin: 5px;
    height: 20%;
    width: 100%;
    display: flex;
}

#send{
    height: 100%;
    width: 20%;
    border-width: 0;
    float: right;
    border-radius: 10px;
}

#message{
    height: 100%;
    width: 50%;
    border-width: 0;
    border-radius: 10px;
    background-color: gray;
}

#upload_img{
    height: 100%;
    width: 20%;
}

<div id="panel">
    <input type="text" id="message">
    <img src="#" id="upload_img">
    <button id="send">გაგზავნა</button>
</div>