here is the image as you can see the content is going out of the box, but I want the height to be set according to the content in short, the height should be dynamic.

i have tried using grid-template-rows: auto auto; still getting same issue. how to fix this issue so that each time the height is set according to the content.

here is the HTML code

<div class="section-3">
      <div class="section-3-body">
        <div class="item-1">
          <div class="consignee-info">
            <div class="consignee-header">
              <p>
                <strong>Consignee:</strong>
                <span class="big fw-bold">B.K. Enterprises (Delhi)</span>
              </p>
              <p>
                <strong>Address:</strong>
                <span>
                  ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNQWERTYUI
                </span>
              </p>
              <div class="state-info">
                <p><strong>State:</strong> <span>Delhi</span></p>
                <p><strong>State code:</strong> <span>07</span></p>
                <p><strong>Phone no :</strong> <span>9311142406</span></p>
              </div>

              <div class="pan-info">
                <p><strong>PAN:</strong> <span>ABFPN3214M</span></p>
                <p><strong>GST No:</strong> <span>07ABFPN3214M1ZM</span></p>
              </div>
            </div>
          </div>
        </div>
        <div class="item-2">
          <div class="transport-name">
            <p>
              <strong>Transport Name:</strong>
              <br />
              <span>JAIPUR GOLDEN JAIPUR GOLDEN JAIPUR GOLDEN JAIPUR</span>
            </p>
          </div>
        </div>
        <div class="item-3">
          <div class="lr-wrapper">
            <div class="lr-vech-no">
              <p>
                <strong>LR/Vehicle Name:</strong>
                <br />
                <span>QWERTYUIOPLKJHGFDAZ</span>
              </p>
            </div>
          </div>
        </div>
        <div class="item-4">
          <div class="lr-vech-date">
            <p>
              <strong>LR/Vehicle Date:</strong>
              <br />
              <span>24-JULY-2024</span>
            </p>
          </div>
        </div>
      </div>
    </div>

here is the CSS

   * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      @page {
        size: A4;
        margin: 0.8cm;
        border: 1px solid #000;
        @bottom-right {
          content: counter(page) " / " counter(pages);
          font-size: 10px;
          color: black;
        }
      }

      html,
      body {
        height: 100%;
        width: 100%;
      }

      .big {
        font-size: 14px;
      }

      p {
        font-size: 10px;
      }

      .section-3 {
        word-break: break-all;
      }

      .section-3-body {
        display: grid;
        grid-template-columns: 65% 17.5% 17.5%;
        grid-template-rows: auto auto;
        border-bottom: 1px solid black;
      }

      .state-info,
      .pan-info {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
      }

      .item-1 {
        grid-column: 1/2;
        grid-row: 1 / span 2;
        border-right: 1px solid black;
      }

      .item-2 {
        grid-column: 2 / 4;
        grid-row: 1 / 2;
        border-bottom: 1px solid black;
        text-align: center;
      }

      .item-3 {
        grid-column: 2/3;
        grid-row: 2 / 3;
        border-right: 1px solid black;
        text-align: center;
      }

      .item-4 {
        grid-column: 3/4;
        grid-row: 2 / 3;
        text-align: center;
      }