html - How to set the first name field on the same column as passport issue date

Question

I am trying to create a Basic Details form. In this i wan all the input field to appear in a tabular format. Is there any way to do that without using table tag

I have tried using css properties like display:flex and flexDirection but it is not working.

return (
      <>
        {/* Main Container Div */}

        <div
          style={{
            display: "flex",
            justifyContent: "space-evenly"
          }}
        >
          {/* First Row Div starts */}
          <div
            style={{
              display: "flex",
              justifyContent: "center",
              flexDirection: "column"
            }}
          >
            <div>
              <img
                src="http://cetra.in/test2/profile_image.png"
                alt="Profile"
                style={{ width: "150px", height: "150px" }}
              />
            </div>
            <div>
              <Button variant="contained" color="primary">
                Upload Photo
              </Button>
            </div>
          </div>
          <div>
            {/* First Row */}
            <div style={styles.row_container}>
              <div style={styles.row_items}>
                <InputLabel shrink>Age</InputLabel>
                <Select
                  margin="dense"
                  value={this.state.select_value}
                  onChange={e => {
                    this.handle_change(e.target.value);
                  }}
                >
                  <MenuItem value="ms">Ms</MenuItem>
                  <MenuItem value="mrs">Mrs</MenuItem>
                  <MenuItem value="mr">Mr</MenuItem>
                  <MenuItem value="miss">Miss</MenuItem>
                </Select>
              </div>
              <div style={styles.row_items}>
                <TextField label="First Name" />
              </div>

              <div style={styles.row_items}>
                <TextField label="Last Name" />
              </div>
            </div>
            {/* First Row Ends */}
            {/* Second Row */}
            <div style={styles.row_container}>
              <div style={styles.row_items}>
                <FormLabel component="legend">Gender</FormLabel>
                <RadioGroup
                  style={{
                    display: "flex",
                    flexDirection: "row"
                  }}
                >
                  <FormControlLabel
                    control={<Radio />}
                    label="Male"
                    value="male"
                  />
                  <FormControlLabel
                    control={<Radio />}
                    label="Female"
                    value="female"
                  />
                </RadioGroup>
              </div>
              <div style={styles.row_items}>
                <MuiPickersUtilsProvider utils={DateFnsUtils}>
                  <DatePicker
                    clearable
                    value={null}
                    variant="inline"
                    label="Date of Birth"
                  />
                </MuiPickersUtilsProvider>
              </div>
            </div>
            {/* Second Row Ends */}

            {/* Third Row */}
            <div style={styles.row_container}>
              <div style={styles.row_items}>
                <TextField label="Passport" />
              </div>
              <div style={styles.row_items}>
                <MuiPickersUtilsProvider utils={DateFnsUtils}>
                  <DatePicker
                    clearable
                    value={null}
                    label="Passport Issue Date"
                    placeholder="Passport Issue Date"
                  />
                </MuiPickersUtilsProvider>
              </div>

              <div style={styles.row_items}>
                <MuiPickersUtilsProvider utils={DateFnsUtils}>
                  <DatePicker
                    clearable
                    value={null}
                    label="Passport Expiration Date"
                    placeholder="Passport Expiration Date"
                  />
                </MuiPickersUtilsProvider>
              </div>
            </div>
            {/* Third Row Ends */}
          </div>
        </div>
      </>
    );

I want the first name to appear as if it were in the same column as the passport issue date and second row should that is with two elements should have it's element on corners of that row.

标签： htmlcssreactjsmaterial-ui