Javascript 物料界面按钮移动到新行

我有一些文字和它前面的一个按钮（弹出窗口）。目前，文本和按钮之间没有空格。我想在这两个项目之间留出一些空间。如果我试着将其中一个放在一个分区中以放置marginRight或marginLeft，则第二个对象（按钮）将移动到下一行。我希望他们都在同一条线上，但中间有一个空格。我怎样才能做到这一点

const useStyles = makeStyles((theme) => ({
  heading: {
    fontSize: "25px"
  },
  popup: {
    marginLeft: "20px"
  }
}));

export default function App() {
  const classes = useStyles();
  return (
    <div className="App">
      <div className={classes.heading}>
        Instructions
        {/* <div className={classes.popup}> */}
        <Popup />
        {/* </div> */}
      </div>
    </div>
  );
}

const useStyles=makeStyles（（主题）=>({
标题：{
字体大小：“25px”
},
弹出窗口：{
边缘左侧：“20px”
}
}));
导出默认函数App（）{
const classes=useStyles（）；
返回(
说明书
{/*  */}
{/*  */}
);
}

---

Codesandbox:

您尝试过使用flexbox吗

在样式中，将标题类更新为

display:flex

  heading: {
   fontSize: "25px",
   display: "flex",
   alignItems: "center"
  },

这就是你想要实现的吗

从您的代码沙盒中分叉：