How can I put my searchbox in to the top right corner?-CodePudding

Hey I try to create a search function where I search to find my products in the list but now I have a little problem and that is that searchBox is not in the top of the corner right. I tried a lot of things but nothing happens. In the left corner there is my logo and I tried to put this to the right corner.

This is my search function:

function Navbar() {
  const [inputText, setInputText] = useState("");
  let inputHandler = (e) => {
    //convert input text to lower case
    var lowerCase = e.target.value.toLowerCase();
    setInputText(lowerCase);
  };
  return (
    <div className="navbar">
      <div className="logo">Shop</div>
      <div className="searchBox">
        <Product input={inputText} />
        <TextField
          id="outlined-basic"
          onChange={inputHandler}
          variant="outlined"
          label="Search"
        ></TextField>
      </div>
    </div>
  );
}

export default Navbar;

This is my css to this :

.navbar {
  width: 100%;
  height: 50px;
  background-color: rgb(32, 32, 32);

  .logo {
    color: aqua;
    font-size: 1.8rem;
    font-family: "Orbitron", sans-serif;
    line-height: 40px;
    margin-left: 20px;
  }

   .searchBox {
    color: aqua;
    font-size: 1.8rem;
    height: 1%;
    width: 100%;
    font-family: "Orbitron", sans-serif;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

CodePudding user response：

Maybe try display: flex, justify-content: space-between and width 100% on .navbar. Also remove width: 100% from .searchBox

CodePudding user response：

Try this!

.navbar {
      width: 100%;
      height: 50px;
      background-color: rgb(32, 32, 32);
      display: flex;
      align-items: center;
      justify-content: space-between;

      .logo {
        color: aqua;
        font-size: 1.8rem;
        font-family: "Orbitron", sans-serif;
        line-height: 40px;
        margin-left: 20px;
      }

       .searchBox {
        color: aqua;
        font-size: 1.8rem;
        height: 1%;
        font-family: "Orbitron", sans-serif;
        display: flex;
        align-items: center;
      }
    }