将Material-UI文本字段与段落对齐

Question

我一直在尝试在一个名为React的"mad-libs“风格的应用中排列一些组件，但我遇到了一些困难。这是一张显示情况的图像，其中的箭头显示了所需的结果。我的flexbox代码已关闭，或者我的Material UI文本字段的样式设置错误。

​

​

我曾使用Flexbox将两个组件排列在一起，但现在我很难重新定位它们以使其匹配。这是我的React代码：(显示一个数组，该数组存储了一个填充了常规文本并需要输入的故事)

return(<div className = "storyContainer">
         {storyList.map((regulartext, index) => (
           <div className = "Parent">
              <div className = "Child1">
                {regulartext}
              </div>
              <div className = "Child2">
               <TextField
                 id="standard-input"
                 label={listFillIns[index]}
                 margin="normal" />
               </div>
             </div>))}
          </div>)

下面是我的CSS代码片段：

.storyContainer{
    display: flex;
    flex-direction: row;
    flex-flow: row wrap;
}

.Parent{
    display: flex;
    flex-direction: row;
    flex-flow: row wrap;
}

基本上，我在这里尝试做的是在父组件中排列两个子组件，然后将父组件排列在一起。最终结果将与存储在{regulartext}中的文本片段对齐，然后每个父Div对齐以减少故事中不必要的换行符。

关于如何排列这些组件，或者找到更好的方法，有什么建议吗？非常感谢您的帮助！

Answer 1

https://codesandbox.io/s/weathered-thunder-i2nih?file=/src/index.js

将align-items: center;添加到父类

.Parent {
  display: flex;
  flex-direction: row;
  flex-flow: row wrap;
  align-items: center;
}

Answer 2

尝试将align-items: flex-end添加到父级