Intentando hacer una barra de búsqueda genérica en React, teniendo problemas para evitar que el botón de búsqueda se mueva al minimizar la ventana. La flecha siempre se moverá fuera de posición cuando minimice la ventana, aunque sea un poco, preguntándome qué me estoy perdiendo en mi código. Quiero que el botón de flecha de búsqueda mantenga su lugar incluso cuando minimice la ventana, pero sigue moviéndose.

Barra de búsqueda.js

 import React from "react"; import './SearchBar.css'; import arrow from './arrow.png'; const SearchBar = ({placeholder,data}) => { return ( <div className="search"> <div className="searchInputs"> <input type="text" placeholder={placeholder}/> <button className='button' style={{position: 'relative', right: 420, top: 15}}> <img className='arrow' src={arrow} alt="logo" style={{position: 'relative', right: 15, bottom: 11}} ></img> </button> <div className="searchIcon"></div> </div> <div className="dataResult"></div> </div> ); } export default SearchBar;

Barra de búsqueda.css

 .searchInputs { margin-top: 55px; display: flex; position: relative; } .search input { background-color: white; border: 0; border-radius: 40px; font-size: 16px; height: 72px; width: 676px; margin: auto; font-family: Proxima Nova,Arial,sans-serif; font-weight: 700; line-height: 1.33; color: #414141; } input:focus { outline: none; } .searchIcon svg { font-size: 16px; } .button { display: flex; flex-direction: row; align-items: left; height: 10px; width: 10px; border-radius: 50%; border: none; padding: 20px; background-color: #428a13; transition: background-color .2s; } .arrow { height: 24px; width: 31px; } .button:hover { color: rgba(255, 255, 255, 1); box-shadow: 0 0px 22px orange; }