Thank you in advance as I am new to this. I am trying to render these fields below dynamically in React and in doing so I want to use either Flexbox or CSS-Grid to accomplish the shape below - (4fr 2fr 2fr) for the first row and (2fr 2fr 2fr 1fr 1fr) for the second row. I have no idea how to approach this when I dynamically render one component. I would love for these to be responsive.

I've tried flexbox and css-grid to no avail, particularly how to do so with dynamic render. Since the Organization field is a dropdown, it will be outside of the render.

My React code:

<div className="container">
   <OrganizationDropDown />
   {inputsArray.map(field => {
      return (
         <TextInput 
            key={field.id}
            className=`child-${?}`
         />
      )
   })}
</div>