使用段落来排列Material-UI文本字段

我一直在尝试在“ mad-libs”风格的React应用程序中排列一些组件，但遇到了一些困难。这是情况的图像，其中的箭头表示所需的结果。我的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}，然后将每个Parent Div对齐，以减少故事中不必要的换行符。

关于如何排列这些组件或寻找更好的方法的任何技巧？任何帮助是极大的赞赏！！