Попытка встроить входы и кнопку с помощью react-strap или css

Question

Я пытаюсь встроить кнопку, и ввод пробовал много вещей, но безуспешно. Я считаю, что это глупо, но я не обнаружил. Я пробовал использовать встроенные строки в bootstrap и CSS (как в примере, но ни к чему не пришел) и я верю, что вы, ребята, легко это увидите, надеюсь на помощь.

import React from "react";
import { connect } from "react-redux";
import { addTodo } from "../redux/actions";
import "./AddToDo.css";
import { InputGroup, InputGroupAddon, Input, Button } from "reactstrap";

class AddTodo extends React.Component {
  constructor(props) {
    super(props);
    this.state = { input: "" };
  }

  updateInput = (input) => {
    this.setState({ input });
  };

  handleAddTodo = () => {
    this.props.addTodo(this.state.input);
    this.setState({ input: "" });
  };

  render() {
    return (
      <div className="addToDoBar">
        <InputGroup size="sm">
          <Input
            placeholder="Add a ToDo. "
            onChange={(e) => this.updateInput(e.target.value)}
            value={this.state.input}
          />
          <InputGroupAddon addonType="append">
            <Button
              color="primary"
              size="sm"
              className="add-todo"
              onClick={this.handleAddTodo}
            >
              Add Todo
            </Button>
          </InputGroupAddon>
        </InputGroup>
      </div>
    );
  }
}

export default connect(null, { addTodo })(AddTodo);

.addToDoBar div {
  display: inline-block;
  align-items: center;
}