Make the input and button on the same line-CodePudding

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;

CodePudding user response：

removing the margin top from input should fix it:

                                    Here
                                     ||

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

CodePudding user response：

you are giving the input a margin-top, you can delete the margin or give the input and the button the same margin.

CodePudding user response：

input and button on same line is not possible,You can try this fire a ngModel event on input and get the data entered in input.