How to get text span to be on top of flex-direction rows

July 6, 2022

I am creating a form and have the following so far:

I need the inputs Name to be on top and then Start Date and End Date to be in the rows below which is fine. However I want the text for "Start Date" and "End Date" to be on top of the input fields rather than within the row. I am not sure how to achieve this and have tried using flexDirection as follows:

 <span>Name </span>
        <Input
          type="text"
          onChange={(e) => setName(e.target.value)}
          value={name}
        />
        <div style={{ flexDirection: "row", display: "flex" }}>
          <span
            style={{
              flexDirection: "column",
              display: "flex",
            }}
          >
            Start Date
          </span>
          <Input
            style={{ flexDirection: "row", width: "45%", flexWrap: "wrap" }}
            type="text"
            onChange={(e) => setStartDate(e.target.value)}
            value={startDate}
          />
          <span>End Date</span>
          <Input
            style={{ flexDirection: "row", width: "45%", flexWrap: "wrap" }}
            type="text"
            onChange={(e) => setEndDate(e.target.value)}
            value={endDate}
          />
        </div>

>Solution :

One solution is wrap each span and input into a div and give each span display: block

It would be better to use classes instead of using inline style.

 <span>Name </span>
    <Input
      type="text"
      onChange={(e) => setName(e.target.value)}
      value={name}
    />
    <div style={{ flexDirection: "row", display: "flex" }}>
      <div>
      <span
       style={{ display: 'block' }}
      >
        Start Date
      </span>
      <Input
        style={{ flexDirection: "row", width: "45%", flexWrap: "wrap" }}
        type="text"
        onChange={(e) => setStartDate(e.target.value)}
        value={startDate}
      />
      </div>
      <div>
      <span style={{ display: 'block' }}>End Date</span>
      <Input
        style={{ flexDirection: "row", width: "45%", flexWrap: "wrap" }}
        type="text"
        onChange={(e) => setEndDate(e.target.value)}
        value={endDate}
      />
      </div>
    </div>