How to Align the search and placeholder in same row?

Question

Will someone please help

 <form action="#" class="search-bar">
                <div>
                    <button type="submit" name="Submit" id="submit"><img src="/search.png" alt="Search"
                            height="35px"></button>
                    <input type="text" placeholder="Search" id="search">

                </div>

            </form>

Answer 1

add Flexbox like this....

if the below code doesn't give you expected result based on what png file you have, remove "align-items: center;" and try again,.

  <form action="#" class="search-bar">
  <div style="display: flex; align-items: center;">
    <button type="submit" name="Submit" id="submit">
      <img src="/search.png" alt="Search" height="35px" />
    </button>
    <input type="text" placeholder="Search" id="search" />
  </div>
</form>