I'm currently working on a React app that has a "mad-libs" style and I'm facing some challenges trying to align a couple of components. The image below shows the current situation along with an arrow pointing to the desired outcome. It seems like either my flexbox code needs adjustments or there might be a styling issue with the Material UI Text Field.
https://i.sstatic.net/14nm4.png
I initially used Flexbox to align the two components, but now I'm struggling to position them correctly. Below is a snippet of my React code: (It's displaying an array containing a story composed of regular text and required 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>)
Additionally, here is the CSS snippet I'm using:
.storyContainer{
display: flex;
flex-direction: row;
flex-flow: row wrap;
}
.Parent{
display: flex;
flex-direction: row;
flex-flow: row wrap;
}
My main goal is to align the child components within their parent containers, and then align these parent divs together to avoid unnecessary gaps in the story. Ideally, the Text Fields should align with the text snippets stored in {regulartext}, creating a cohesive layout.
If you have any suggestions on how to improve this alignment or if there are better approaches to achieve this, I'd greatly appreciate your input! Thank you for any help!