How to add left and right padding to a tbody tag to indent the top and bottom border?

Question

I have a table, which is composed of tbody tags. I am using a hide class to toggle the collapse of tbody elements. I would like to add left and right padding to the tbody, to indent the top and bottom border. The tbody section is the white section in the screenshot below. I have tried using border-spacing and tbody:before in my css styles, but it is not working. Can anyone advise how I can accomplish this? I have added a codesandbox and code snippet for your review.

Image:

Code Snippet:

<table>
        <thead>
          <tr>
            <th>Regian</th>
            <th>Q1 2010</th>
            <th>Q2 2010</th>
            <th>Q3 2010</th>
            <th>Q4 2010</th>
          </tr>
        </thead>
        {/* <tbody> */}
        <tbody className="labels">
          <tr>
            <td colSpan="5">
              <label htmlFor="accounting">Accounting</label>
              <input
                type="checkbox"
                name="accounting"
                id="accounting"
                data-toggle="toggle"
                onClick={showNestedData}
              ></input>
            </td>
          </tr>
        </tbody>
        <tbody className="hide" id="accounting-data">
          <tr>
            <td className="border">Australia</td>
            <td className="border">$7,685.00</td>
            <td className="border">$3,544.00</td>
            <td className="border">$5,834.00</td>
            <td className="border">$10,583.00</td>
          </tr>
          <tr>
            <td>Central America</td>
            <td>$7,685.00</td>
            <td>$3,544.00</td>
            <td>$5,834.00</td>
            <td>$10,583.00</td>
          </tr>
        </tbody>
</table>