title: React/Tailwind CSS: Search bar filter moving when typed in/filtering data
body: <p>Its been a while since I coded in react and I'm working on teaching myself again. Also this is the first time I've used Tailwind CSS. I'm working with a navbar component that has a search bar to filter data within a database. I have everything setup correctly for the most part. The issue is that when you type in the search bar, the user img, and buttons moved like the nav sections is being pushed down when the filter response shows up below the search bar.</p>
  <p>Here is my code for the navbar with the search bar</p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  
  import UserDropdown from &quot;../../components/Dropdowns/UserDropdown.js&quot;;
  import AccountDropdown from &quot;../Dropdowns/AccountDropdown.js&quot;;
  
  export default function Navbar({ data }) {
    const [filteredData, setFilteredData] = useState([]);
    const [wordEntered, setWordEntered] = useState(&quot;&quot;);
  
    const handleFilter = (event) =&gt; {
      const searchWord = event.target.value;
      setWordEntered(searchWord);
      const newFilter = data.filter((value) =&gt; {
        return value.dealership.toLowerCase().includes(searchWord.toLowerCase());
      });
  
      if (searchWord === &quot;&quot;) {
        setFilteredData([]);
      } else {
        setFilteredData(newFilter);
      }
    };
  
  
    return (
      &lt;&gt;
        {/* Navbar */} 
        &lt;div className=&quot;relative bg-lightBlue-600 md:pt-32 pb-32 pt-12&quot;&gt;
          &lt;nav className=&quot;absolute top-0 left-0 w-full z-10 bg-transparent md:flex-row md:flex-nowrap md:justify-start flex items-center p-4&quot;&gt;
            &lt;div className=&quot;w-full mx-autp items-center flex justify-between md:flex-nowrap flex-wrap md:px-10 px-4&quot;&gt;
              {/* Brand */}
              &lt;a
                className=&quot;text-white text-sm uppercase hidden lg:inline-block font-semibold&quot;
                href=&quot;#pablo&quot;
                onClick={(e) =&gt; e.preventDefault()}
              &gt;
                Dashboard
              &lt;/a&gt;
              &lt;div className=&quot;md:flex flex-row flex-wrap items-center lg:ml-auto mr-3&quot;&gt;
                &lt;AccountDropdown /&gt;
              &lt;/div&gt;
              {/* Form */}
              &lt;form className=&quot;md:flex hidden flex-row flex-wrap items-center lg:ml-auto mr-3&quot;&gt;
                &lt;div className=&quot;relative flex w-full flex-wrap items-stretch&quot;&gt;
                  &lt;span className=&quot;z-10 h-full leading-snug font-normal absolute text-center text-blueGray-300 absolute bg-transparent rounded text-base items-center justify-center w-8 pl-3 py-3&quot;&gt;
                    &lt;i className=&quot;fas fa-search&quot;&gt;&lt;/i&gt;
                  &lt;/span&gt;
                  &lt;input
                    type=&quot;text&quot;
                    placeholder=&quot;Search here...&quot;
                    className=&quot;border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 relative bg-white bg-white rounded text-sm shadow outline-none focus:outline-none focus:ring w-full pl-10&quot; 
                    value={wordEntered} 
                    onChange={handleFilter}
                  /&gt;
                &lt;/div&gt;
                {filteredData.length != 0 &amp;&amp; (
                &lt;div className=&quot;dataResult&quot;&gt;
                {filteredData.slice(0, 15).map((value) =&gt; {
              return (
                &lt;a className=&quot;dataItem&quot; href=&quot;/admin/dashboard&quot;&gt;
                  &lt;p&gt;{value.dealership}&lt;/p&gt;
                &lt;/a&gt;
              );
            })}
                &lt;/div&gt;
                )}
              &lt;/form&gt;
              {/* User */}
              &lt;ul className=&quot;flex-col md:flex-row list-none items-center hidden md:flex&quot;&gt;
                &lt;UserDropdown /&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/nav&gt;
        &lt;/div&gt;
        {/* End Navbar */}
      &lt;/&gt;
    );
  }
  </code></pre>
  <p>Here are a few pics of what it does.</p>
  <p><a href="https://i.stack.imgur.com/VPyqm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VPyqm.png" alt="Before Typing" /></a></p>
  <p><a href="https://i.stack.imgur.com/eX9A0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eX9A0.png" alt="After Typing" /></a></p>