Placing links under input

Question

So, I made this website where you have links under an input. I want the 4 links to be placed under the input like this for example .

 .q-links {
  list-style-type: none;
  display: flex;
  flex-direction: horizonal;
  color: rgb(140, 140, 140);
  
  .search-bar {
    border-radius: 50px;
    border: none;
    padding: 0.75rem 1rem;
    /* Adjust padding for better input size */
    width: calc(100% - 2rem);
    /* Use calc() for responsive width */
    margin: 0.5rem;
    /* Adjust margin for spacing */
    box-sizing: border-box;
    /* Include padding in width calculation */
    width: 60%;
    margin-left: -2em;
    flex-grow: 1;
    box-shadow: 5px 5px 50px #000000;
    z-index: 5;
  }

<header class="nav-bar">

  <img src="Final New RFS Logo 2021-01 (2).png" class="logo" alt="RFS Logo">

  <div style="margin: 0; padding: 0; display: flex; align-items: center; flex-direction: row; width: auto;">

    <input class="search-bar" type="text" placeholder="Search Anything at RFS">

    <ul class="q-links">
      <li>Students</li>
      <li>Staff</li>
      <li>Parents</li>
      <li>Alumni</li>
    </ul>
  </div>

I expected it to have the 4 links under under the input exactly, and not like this

Additionally, I am not sure what HTML to add or remove in order to have all the links below the input, and never rime I did try flexes, ot ended up altering the input shape and bugging it up.