Seeking assistance with implementing React and Material UI in my project.
My objective is to create a layout with 3 columns on desktop - one column with a radio button and label inline, and the other two columns containing select menus with option values.
For the mobile version, I aim to have two columns with the select menus inside, and the input positioned above the columns.
Refer to the following images for reference: Desktop Layout and Mobile Layout.
Currently, I have achieved the 3-column layout on desktop but facing challenges with the mobile version. As a beginner in React and Material UI, any guidance would be highly appreciated.
<Grid display='flex>
<Grid lg={4}
<FormControlLabel value="my quantity" control={<Radio />} label="My Label" />
</Grid>
<Grid lg={4}>
<InputLabel htmlFor="uncontrolled-native" sx={{ display:'inline-block'}}>Text One</InputLabel>
<Select defaultValue={4} sx={{ backgroundColor:'lightgrey'}}>
<option value={1}>1</option>
</Select>
</Grid>
<Grid lg={4}>
<InputLabel htmlFor="uncontrolled-native" sx={{ display:'inline-block'}}>Text Two</InputLabel>
<Select>
<option value={1}>1</option>
</Select>
</Grid>
</Grid>
Thank you and have a great day!