javascript - How do I get a button next to a search box in a sticky html container?

Question

I have adapted some code on a web page to search for text in a table below.

I've created a sticky bar so the search box follows you down the page.

I'm now trying to put a home button next to the search box but the button appears underneath the box and not to the right of it.

Can anyone suggest how I can get the button to appear to the right of the search box?

This is the page code

div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 3em;
  background-color: white;
  padding: 10px;
  width: 100%;
  height: 60px;
  margin: auto;
  z-index: 10;
}

div.stickycontainer {
    width: 50%;
    margin: 0 auto;
    position: relative;
    right: 100px;
}

<div class="sticky">

  <div class="stickycontainer" style="vertical-align: middle; top: 0.3em;   padding-left: 80px;">
    <input type="search" placeholder="Type any course code or keyword and scroll to see all results..." title="Type any course code or keyword and scroll to see all results..." class="form-control search-input" data-table="data-list"/>

    <a href="#home"><i class="fa fa-home" aria-hidden="true"></i> Home</a>      

  </div>

</div>

question from:https://stackoverflow.com/questions/66061524/how-do-i-get-a-button-next-to-a-search-box-in-a-sticky-html-container

Answer 1

Just add display: flex; flex-direction: column; to your class div.stickycontainer.

If you want to align center you can add text-align: center; to the same place and you can remove the vertical-align: middle; from your inline css.

Btw, why do you need to have inline CSS and normal CSS ?

div.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 3em;
    background-color: white;
    padding: 10px;
    width: 100%;
    height: 60px;
    margin: auto;
    z-index: 10;
}

div.stickycontainer {
    width: 50%;
    margin: 0 auto;
    position: relative;
    right: 100px;
    /*vertical-align: middle;*/
    top: 0.3em;
    padding-left: 80px;
    
    display: flex;          /* ADDED */
    flex-direction: column; /* ADDED */
    text-align: center;     /* ADDED */
}

<div class="sticky">

  <div class="stickycontainer">
    <input type="search" placeholder="Type any course code or keyword and scroll to see all results..." title="Type any course code or keyword and scroll to see all results..." class="form-control search-input" data-table="data-list"/>

    <a href="#home"><i class="fa fa-home" aria-hidden="true"></i> Home</a>      

  </div>

</div>