primereact - Accordion - How to align components in Tab content (vertical / horizontal)

Question

I am trying to place six InputText components in one Accordion Tab aligned like a 2x3 table (3 columns and 2 rows), but I just don't know how to accomplish that. For instance, if I place the div with the InputText according to the example (see link below), then the content of the div is aligned vertically. like this:

This is my code:

<div className="card">
  <Accordion activeIndex={0}>
    <AccordionTab
      header={
        <div className="flex align-items-center">
          <i className="pi pi-globe m-8"></i>
          <span className="vertical-align-middle" style={{ marginRight: 8 }}>Connection</span>
        </div>

      }
    >
      <div class="flex flex-column">
        <label htmlFor="username">Username</label>
        <InputText id="username" aria-describedby="username-help" />
        <small id="username-help">
          Enter your username to reset your password.
        </small>
      </div>

    </AccordionTab>
  </Accordion>
</div >

I wish to have the "Username"-label, the InputText-field, and the description text aligned vertically and given 6 times in total (3 times in a row and 2 rows total)

https://primereact.org/inputtext/#helptext

https://primereact.org/accordion/