网格和正确对齐失败

Question

我正在构建一个多步骤表单，系统似乎可以运行，但是用户界面看起来并不好。

这就是我所拥有的：

这就是我要寻找的

return (
          <div className="form-container"> 
          <Row>
          <Col xs lg="2">
            {this.previousButton}
          </Col>
          <Col md="auto">{formList}</Col>
          <Col xs lg="2">
            {this.nextButton}
          </Col>
          </Row> 
          </div>
        )

和CSS

.form-container {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0px 8px 18px 0 rgba(0,0,0,0.14);
  border-radius: 20px;
  display: flex;
  flex-direction: row;
}

名字输入在下面的类中定义：

import React from 'react';
import TextContents from '../../assets/translations/TextContents'
import './CreateClassOnBoardingForm.css';
import TextField from '@material-ui/core/TextField';
import {
  fade,
  ThemeProvider,
  withStyles,
  makeStyles,
  createMuiTheme,
} from '@material-ui/core/styles';

class ClassCreationFormName extends React.Component {
    render() {

      const CssTextField = withStyles({
        root: {
          '& label': {
            fontSize: '20px',
            fontWeight: 'bold',
            color: 'black',
            width: '600px'
          },
          '& label.Mui-focused': {
            color: '#ff7255',
          },
          '& .MuiInput-underline:after': {
            borderBottomColor: '#ff7255',
          },
          '& .MuiOutlinedInput-root': {
            '& fieldset': {
              borderColor: 'red',
            },
            '&:hover fieldset': {
              borderColor: 'yellow',
            },
            '&.Mui-focused fieldset': {
              borderColor: '#ff7255',
            },
          },
        },
      })(TextField);

      if (this.props.currentStep !== 1) { // Prop: The current step
        return null
      }
      return(
        <form noValidate autoComplete="off">
          <CssTextField id="standard-basic" 
              label={TextContents.FormClassTeacherName} 
              color="#ff7255"/>
        </form>
      )
    }
  }

  export default ClassCreationFormName

我的首要任务是找出如何根据设计需要修复上一个/轮廓，表格和下一个的对齐方式。我在想，至少使用Row可以做到，但不能...

有什么想法吗？