Make the input and button on the same line

I’m making a todo list app using react and chakra ui.

I want to make the input and the button on the same line.

This is what i get: photo

I want to make something like this: photo

My Code:

App.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;

Answer

removing the margin top from input should fix it:

                                    Here
                                     ||

 <Input placeholder="New Task" marginTop={5} size="lg" />

Advertisement

Answer