want to achieve this but getting shrinkage every time after adding the display flex, if I remove the flex property then It will work properly, I also tried flex-shrink but it didn’t work for me

I am using flex-box for this layout , please help me to achieve this design in proper way and one condition is that I had tried table too but it didn’t work as it grow and shrink according to the data and I am making a invoice of fixed width
here is my html code

<div class="section-2">
      <div class="section-2-body">
        <div class="content-wrapper">
          <div class="upper-wrapper">
            <div class="upper-left-content">
              <div class="upper-left-content-wrapper">
                <div class="invoice-container">
                  <div class="invoice-wrapper">
                    <div class="invoice-title">
                      <p><strong>Invoice no</strong></p>
                      <p><strong>Invoice Date</strong></p>
                      <p><strong>Payment Terms</strong></p>
                      <p><strong>Due date</strong></p>
                      <p><strong>Broker name</strong></p>
                    </div>
                    <div class="invoice-value">
                      <p><strong>:SREI2425-01871</strong></p>
                      <p>:07-Jun-2024</p>
                      <p>:90 days</p>
                      <p><strong>:06-Sep-2024</strong></p>
                      <p>:Direct</p>
                    </div>
                  </div>
                </div>

                <div class="branch-section">
                  <div class="branch-section-wrapper">
                    <div class="branch">
                      <p>
                        <strong>Branch</strong>
                        <br />
                        <span
                          >Ginza Industries Limited (KDC) Ginza Industries
                          Limited (KDC)
                        </span>
                      </p>
                    </div>
                    <div class="pos">
                      <p>
                        <strong>Place of Supply:</strong>
                        <br />
                        <span>Dadra and Nagar Haveli and Daman and Diu</span>
                      </p>
                    </div>
                  </div>
                </div>

                <div class="branch-ref-section">
                  <div class="branch-ref-wrapper">
                    <div class="branch-ref">
                      <p>
                        <strong>Branch Ref:</strong>
                        <br />
                        <span>1</span>
                      </p>
                    </div>
                    <div class="nop">
                      <p>
                        <strong>No of Parcel:</strong>
                        <br />
                        <span>8</span>
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="lower-left-content">
              <div class="lower-left-content-wrapper">
                <div class="buyer">
                  <p>
                    <strong
                      >Buyer:
                      <span class="big"> B.K. Enterprises (Delhi)</span></strong
                    >
                  </p>
                  <p>
                    <strong>Address:</strong>
                    <span>
                      2009, 1st Floor,, Kinari Bazar, Delhi., New Delhi- 110006
                    </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>

          <div class="upper-right-content">
            <div class="upper-right-content-wrapper">
              <div class="right-side-qr-code">
                <div class="qr-code" style="border: 1px solid red">
                  <img
                    src="https://cdn.britannica.com/17/155017-050-9AC96FC8/Example-QR-code.jpg"
                    alt=""
                  />
                </div>
                <div class="bill-no"></div>
                <div class="bill-date"></div>
              </div>
              <div class="left-side-qr-code" style="border: 1px solid blue">
                <img
                  src="https://cdn.britannica.com/17/155017-050-9AC96FC8/Example-QR-code.jpg"
                  alt=""
                />
              </div>
            </div>
          </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;
      }

      .section-2 {
        width: 100%;
        border-bottom: 1px solid #000;
        min-height: 15%;
      }

      p {
        font-size: 10px;
      }

      .section-2-body {
        width: 100%;
        height: 100%;
      }

      .content-wrapper {
        display: flex;
        width: 100%;
        height: 100%;
      }

      .upper-left-content {
        width: 65%;
      }

      .upper-left-content-wrapper {
        display: flex;
        width: 100%;
      }

      .invoice-container {
        width: 55%;
        border-right: 1px solid black;
      }

      .invoice-wrapper {
        display: flex;
        width: 100%;
        align-items: baseline;
        line-height: 1.7;
      }

      .invoice-wrapper .invoice-title {
        white-space: nowrap;
      }

      .invoice-wrapper .invoice-value {
        margin-left: 10px;
      }

      .branch-section {
        width: 25%;
        border-right: 1px solid black;
        text-align: center;
      }

      .branch-ref-section {
        width: 20%;
        border-right: 1px solid black;
        text-align: center;
      }

      .branch-section-wrapper,
      .branch-ref-wrapper {
        width: 100%;
      }

      .branch,
      .branch-ref {
        min-height: 70px;
        border-bottom: 1px solid black;
      }

      .pos,
      .nop {
        min-height: 30px;
      }

      .lower-left-content {
        width: 65%;
      }

      .lower-left-content-wrapper {
        width: 100%;
        border-top: 1px solid black;
        border-right: 1px solid black;
      }

      .lower-left-content-wrapper .buyer {
        padding: 4px;
        line-height: 1.5;
      }

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

      .upper-right-content {
        width: 35%;
      }

      .upper-right-content-wrapper {
        display: flex;
        width: 100%;
      }

      .upper-right-content-wrapper .right-side-qr-code {
        width: 55%;
      }

      .upper-right-content-wrapper .left-side-qr-code {
        width: 45%;
      }

      .upper-right-content-wrapper .qr-code img,
      .upper-right-content-wrapper .left-side-qr-code img {
        width: 60px;
        height: 60px;
      }

      div,
      section,
      p {
        word-break: break-all;
      }