设置表单中的按钮样式以仅与引导程序位于同一通道上

Question

我正在尝试在ToDo的同一行上设置按钮的样式

。 我尝试了一些没有成功的东西，我认为那很愚蠢，但我不明白，希望能提供帮助

import React from "react";
import { connect } from "react-redux";
import cx from "classnames";
import { toggleTodo, deleteTodo } from "../redux/actions";
import { ListGroupItem, Button } from "reactstrap";

const Todo = ({ todo, toggleTodo, deleteTodo }) => (
  <ListGroupItem className="todo-item d-inline">
    <div onClick={() => toggleTodo(todo.id)}>
      {todo && todo.completed ? "?" : "?"}{" "}
      <span
        className={cx(
          "todo-item__text",
          todo && todo.completed && "todo-item__text--completed"
        )}
      >
        {todo.content}
      </span>
    </div>
    <Button
      color="warning"
      size="sm"
      active
      onClick={() => deleteTodo(todo.id)}
    >
      DELETE
    </Button>
  </ListGroupItem>
);

// export default Todo;
export default connect(null, { toggleTodo, deleteTodo })(Todo);