How to layout form with labels on left of input textbox with material ui?

Question

I want have form something like this:

For larger screens:

For smaller screens:

When I checked the MUI TextField documentation page, no such example is given. All examples put label above or inside textbox:

Q1. Why is it so? Is the layout that I desire is not what is expected by Material design principle?

So I tried various things:

import { FormControl, Grid, Input, InputLabel, TextField } from "@mui/material";

export default function App() {
  return (
    <Grid container>

      {/* APPROACH 1: <InputLabel> and <TextField> without FormControl */}

      <Grid item xs={12} sm={12} md={2}>
        <InputLabel htmlFor="name-input">First Name: </InputLabel>
      </Grid>
      <Grid item xs={12} sm={12} md={10}>
        <TextField variant="standard" size="small"></TextField>
      </Grid>

      {/* APPROACH 2: <div> and <Input> without FormControl */}

      <Grid item xs={12} sm={12} md={2}>
        <div> Middle Name: </div>
      </Grid>
      <Grid item xs={12} sm={12} md={10}>
        <Input id="fname-input" />
      </Grid>

      {/* APPROACH 3: <InputLabel> and <Input> with FormControl */}

      <Grid item xs={12} sm={12} md={2}>
        <FormControl>
          <InputLabel htmlFor="lname-input">Last Name: </InputLabel>
        </FormControl>
      </Grid>
      <Grid item xs={12} sm={12} md={10}>
        <FormControl>
          <Input id="lname-input" />
        </FormControl>
      </Grid>
    </Grid>
  );
}

codesandbox link

This renders:

Q2. Note that in above render, wrapping <InputLabel> inside <FormControl> did not render it. Why is this so?

Now I have following questions:

Q3. What of different approaches should I follow? Or in other words, which of the approaches is inline with react / material ui philosophy? You may decompose this question In specific, should I use <div> vs <InputLabel>, <Input> vs <TextField>? Also, should I use <FormControl> or not?

Q4. Is there any other preferred / recommended way to achieve what I want, may be an alternative to <Grid> or using TextField without splitting it into label and input?

Edit:

People voting for close, please at least let me know why you are voting for close, especially if its duplicate with link to existing question. I wanted to know MUI-recommended way to achieve this. I feel what I did isnt really MUI-way, may be as it doesnt look well. But I didnt find any post discussing how we can achieve same layout with MUI.