I have a collapsible table, which opens and closes when clicking on Accounting. It requires a unique layout. I have added a checkbox to my collapsible rows, which must align with the Date column. I have shifted all my titles over with a negative margin, in order to group with the checkbox. Now, I need to extend the borders, so they appear underneath the titles again(see picture below). I have created a codesandbox for your review. Can anyone advise on the best method to extend the borders, so they align with the titles? Please note: My date column uses rowspans, so I don't believe adding padding-left will resolve the issue.

Code Snippet:

<tbody>
          <tr>
            <td rowSpan="3" id="date">
              Date
            </td>
            <td colSpan="4">
              <label className="accounting-label" htmlFor="accounting">
                Accounting
              </label>
              <input
                type="checkbox"
                name="accounting"
                id="accounting"
                data-toggle="toggle"
                onClick={showNestedData}
              ></input>
            </td>
          </tr>
          <tr className="accounting-data hide">
            <td className="australia-data">
              <div className="flex-au-wrapper">
                <div className="au-checkbox-wrapper">
                  <input
                    type="checkbox"
                    id="au-checkbox"
                    name="subscribe"
                    value="newsletter"
                  ></input>
                </div>
                <div>Australia</div>
              </div>
            </td>
            <td>$3,544.00</td>
            <td>$5,834.00</td>
            <td>$10,583.00</td>
          </tr>
</tbody>