Estoy haciendo una aplicación de lista de tareas pendientes usando react y chakra ui.

Quiero hacer la entrada y el botón en la misma línea.

Esto es lo que obtengo: foto

Quiero hacer algo como esto: foto

Mi código:

Aplicación.js:

 import "./App.css"; import { ChakraProvider } from "@chakra-ui/react"; import Todo from "./components/Todo"; function App() { return ( <ChakraProvider> <div className="App"> <Todo /> </div> </ChakraProvider> ); } export default App;

Todo.js:

 import { Container, Box, Heading, Input, Button } from "@chakra-ui/react"; import { MdAdd } from "react-icons/md"; function Todo() { return ( <Container maxW="4xl" minHeight="100vh" display="flex" alignItems="center" justifyContent="center" > <Box boxShadow="base" rounded="lg" padding={10} background="white" width="100%" > <Heading as="h1" size="md" textAlign="center"> Todo List App </Heading> <Box display="flex" alignItems="center" justifyContent="space-between"> <Input placeholder="New Task" marginTop={5} size="lg" /> <Button colorScheme="blue" rightIcon={<MdAdd />} margin={0}> Add </Button> </Box> </Box> </Container> ); } export default Todo;