Issue with responsive table formatting using bootstrap css

My goal is to have two tables next to each other with the one on the right overflowing horizontally. Currently, the second table is being moved under the first. Any help would be greatly appreciated.

<div class="container-fluid bg-secondary">
  <div class="text-center">
    <h3 class="text-light mx-auto pt-3">Data Acquisitions</h3>
  </div>
  <div class="row g-0">
    <div class="col">
      <div class="table-responsive mx-3" style="height: 300px;" >
        <table
          id="amp-table-head"
          class="table table-striped table-dark table-hover table-sm my-3 px-3"
        >
          <thead>
            <tr>
              <script>
                var headers = ["OP Code", "Index", "Date", "Time", "Run", "Point"];
                for (i = 0; i < headers.length; i++) {
                  document.write('<th scope="col">' + headers[i] + "</th>");
                }
              </script>
            </tr>
          </thead>
          <tbody></tbody>
        </table>
      </div>
    </div>
    <div class="col">
      <div class="table-responsive mx-3" style="height: 300px;">
        <table
          id="amp-table-data"
          class="table table-striped table-dark table-hover table-sm my-3 px-3"
        >
          <thead>
            <tr>
              <script>

                var headers = ["Mindex", "NRi", "Qi", "Pi", "H", "TO", "ALPHAC", "PSIC", "PHIC", "ALPHAA", 
                "BETAA", "Phi-A", "Phi-f", "NF 1", "PM 1", "SF 1", "YM 1", "RM 1", "AF 1", "ALP DVM", "PR1", 
                "PR2", "Dew pt", "Tref", "Delta-R", "Baro", "PBJ", "THERMO", "CHAN96", "sense 96"  ];

                for (i = 0; i < headers.length; i++) {
                  document.write('<th scope="col">' + headers[i] + "</th>");
                }

              </script>
            </tr>
          </thead>
          <tbody></tbody>
        </table>
      </div>
    </div>
  </div>
</div>

I tried to use regular css instead of the bootstrap table responsive class but that did not work. I cant seem to find out the issue.

>Solution :

Set a fixed size for the second column, let’s say w-50 which means width: 50%;, i.e. it’ll take half the page, therefore, it’ll force the first column to take half the page too.

Your code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid bg-secondary">
    <div class="text-center">
        <h3 class="text-light mx-auto pt-3">Data Acquisitions</h3>
    </div>
    <div class="row g-0">
        <div class="col">
            <div class="table-responsive mx-3" style="height: 300px;">
                <table id="amp-table-head" class="table table-striped table-dark table-hover table-sm my-3 px-3">
                    <thead>
                        <tr>
                            <script>
                                var headers = ["OP Code", "Index", "Date", "Time", "Run", "Point"];
                                for (i = 0; i < headers.length; i++) {
                                    document.write('<th scope="col">' + headers[i] + "</th>");
                                }
                            </script>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
        <div class="col w-50">
            <div class="table-responsive mx-3" style="height: 300px;">
                <table id="amp-table-data" class="table table-striped table-dark table-hover table-sm my-3 px-3">
                    <thead>
                        <tr>
                            <script>
                                var headers = ["Mindex", "NRi", "Qi", "Pi", "H", "TO", "ALPHAC", "PSIC", "PHIC", "ALPHAA", "BETAA", "Phi-A", "Phi-f", "NF 1", "PM 1", "SF 1", "YM 1", "RM 1", "AF 1", "ALP DVM", "PR1", "PR2", "Dew pt", "Tref", "Delta-R", "Baro", "PBJ", "THERMO", "CHAN96", "sense 96" ];

                                for (i = 0; i < headers.length; i++) {
                                    document.write('<th scope="col">' + headers[i] + "</th>");
                                }
                            </script>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</div>