如何使用 tsx 格式的 nextjs 代码将复选框布局更改为网格格式，以便按照此语法放置复选框的布局

如何使用 tsx 格式的 nextjs 代码将复选框布局更改为网格格式，以便按照此语法放置复选框的布局

<input
 className="form-check-input"
 type="checkbox"
 name={item.desc}
 value={answer}
 onChange={(event) => handlePhysicalCheckingChange(event, item)}                                          
 checked={isPhysicalCheckingChecked(item.desc, answer)}
 />

将像此附图一样。条件如下，在 \'Pemeriksaan Fisik\' 标签下的描述中，描述示例为 \'Fimosis\'、\'Gland\' 等，下面描述中的第一个复选框（例如第二个描述）出现在其上方描述中的第一个复选框的正下方，而其下方描述中的第二个复选框出现在其上方描述的第二个复选框的正下方。以下是用于更改布局的 tsx 格式的 nextjs 代码。

<div className="row row-cards">
      <div className="col-md-12 col-sm-12">
                          <div className="mb-3">
                            <label className="form-label">Pemeriksaan Fisik :</label>
                            <div>
                            {dataPhysicalChecking?.map((item: any, index: number) => (
                              <div key={item.id} style={{ display: 'flex', alignItems: 'center' }}>
                                <p style={{ marginRight: 'auto' }}>
                                  {index + 1}. {item.desc}
                                </p>
                                {possibleAnswers[item.desc]?.map((answer) => (
                                  <div className="form-check form-check-inline" key={answer} style={{ display: 'flex', alignItems: 'center' }}>
                                    {answer !== "Sebutkan" ? (
                                      <>
                                        <input
                                          className="form-check-input"
                                          type="checkbox"
                                          name={item.desc}
                                          value={answer}
                                          onChange={(event) => handlePhysicalCheckingChange(event, item)}                                          
                                          checked={isPhysicalCheckingChecked(item.desc, answer)}
                                        />
                                        <label
                                          className="form-check-label"
                                          htmlFor={`checkbox-${item.id}-${answer}`}
                                          style={{ marginLeft: '8px' }}
                                        >
                                          {answer}
                                        </label>
                                      </>
                                    ) : (
                                      <>
                                        <label className="form-check-label" style={{ display: 'flex', alignItems: 'center', marginRight: 10 }}>
                                          Sebutkan
                                          <span style={{ marginLeft: 5 }}>:</span>
                                        </label>
                                        <input
                                          type="text"
                                          className="form-control"
                                          style={{ marginLeft: 0 }}
                                          value={sebutkanPhysicalCheckingText[item.desc] || ''}
                                          disabled={!isInputPhysicalCheckingEnabled[item.desc]}
                                          onChange={handleTextPhysicalCheckingChange(item.desc)}
                                        />
                                      </>
                                    )}
                                  </div>
                                ))}
                              </div>
                            ))}
                            </div>
                          </div>
                        </div>
                      </div>