Html 网格和正确对齐失败

我正在构建一个多步骤表单，系统似乎可以工作，但UI看起来不太好

这就是我所拥有的：

这就是我要找的

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

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

从“React”导入React；
从“../../assets/translations/TextContents”导入文本内容
导入“/CreateClassOnBoardingForm.css”；
从“@material ui/core/TextField”导入TextField；
进口{
褪色
提供者，
用方式,，
制作风格，
创造博物馆，
}来自“@material ui/core/styles”；
类ClassCreationFormName扩展了React.Component{
render（）{
const CssTextField=带样式({
根目录：{
“&标签”：{
fontSize:'20px'，
fontWeight:'粗体'，
颜色：'黑色'，
宽度：“600px”
},
“&label.Mui聚焦”：{
颜色：“#ff7255”，
},
'&.MuiInput下划线：在''{
borderBottomColor:“#ff7255”，
},
“&.muioOutlinedInput根”：{
“&字段集”：{
边框颜色：“红色”，
},
“&：悬停字段集”：{
边框颜色：“黄色”，
},
“&.Mui聚焦字段集”：{
边框颜色：'#ff7255'，
},
},
},
})（文本字段）；
如果（this.props.currentStep！==1）{//Prop:当前步骤
返回空
}
返回(
)
}
}
导出默认ClassCreationFormName

我的首要任务是找出如何修复上一个/外形、形状和下一个的对齐方式，如设计所需。我在想，至少使用Row可以做到这一点，但没有

有什么想法吗

.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