Lining up Material-UI Text Field with Paragraph

I've been trying to line up a few components in a "mad-libs" styled React app and I'm having some difficulty. Here is an image of what the situation looks like, with an arrow showing the desired result. Either my flexbox code is off, or my styling for the Material UI Text Field is wrong..

I have used Flexbox to get the two components lined up, but now am having difficulty repositioning them to match. Here is my React code: (Displaying an array which is storing a story filled with regular text and require inputs)

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>)

And here is my CSS snippet:

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

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

Basically what I'm trying to do here is line up the two child components within the parent, and then lineup the parents together. The end result would have the lined up with the text snippet stored in {regulartext}, and then each Parent Div lined up to reduce unessary newlines in the story.

Any tips on how to line up these components, or finding a better way to do this? Any help is greatly appreciated!!