My HTML page layout is structured as follows:

https://i.sstatic.net/elwVs.png

The issue at hand is that I want the MSAN and Users columns to be in the same row, or else, for a large number of records, it won't be feasible. Here's my HTML file. The presentation of values and other aspects can be ignored.

<div class="panel panel-default">
  <div class="panel-heading">
    <br>
      <h1 style="text-align: center">License Generator</h1><br>
      <div class="row" [hidden]="!deleteMessage">
           
                <!--<div class="col-sm-4"></div> -->
                <div> <!---->
                        <div class="alert alert-info alert-dismissible">
                                <button type="button" class="close" data-dismiss="alert">&times;</button>
                                <strong>License Deleted</strong>
                        </div>
                </div>
                <!-- <div class="col-sm-4"></div> -->
        </div>           
    </div>

  
  <div class="panel-body">
      <table  class="table table-hover table-sm" datatable [dtOptions]="dtOptions"
      [dtTrigger]="dtTrigger"  >
          <thead class="thead-light">
              <tr>
                  <th>Customer ID</th>
                  <th>Hardware Key</th>
                  <th>Product</th>
                  <th>License Key</th>
                  <th>Action</th>  
              </tr>
          </thead>
          <tbody>
               <tr *ngFor="let student of students ">
                  <td>33333</td>
                  <td>22222</td>
                  <td>ABC</td>
                  <td><textarea rows="2" cols="20" wrap="hard">fxLBJ0BF5b+CLBCW9xamqsCgP0AyVIVpCCiYGI3WfEOAPPB7nVgHipERQmv2wVJYQI9PwfpS+4qP5owl4eDfI/f42cbu+SBTty3Sk/sGzZfon1xUndfAzsqbHD/DbFjQAtbpzeB7yr7AtNSV22WBv/lwC4ZW0k1KGR44tNM8aW5UQf9/WmuKeM/dFKIiW6vKMd9dn35jJ5AdlUIBRKwTFg==</textarea></td>
                  <td><button (click)="deleteStudent(student.student_id)" class='btn btn-primary'><i class="fa fa-futboll-0">Delete</i></button>&nbsp;
                    <button (click)="updateStudent(student.student_id)" class='btn btn-primary'
                    data-toggle="modal" data-target="#myModal">Update</button>&nbsp;
                    <button (click)="updateStudent(student.student_id)" class='btn btn-primary'
                    data-toggle="modal" data-target="#myModal">Copy License Key</button>
                  </td>
                </tr> 
          </tbody><br>
          <thead class="thead-light">
            <tr>
                <th>Max MSAN</th>
                <th>Max Users</th>
            </tr>
        </thead>
        <tbody>
          <tr *ngFor="let student of students ">
             <td>10000</td>
             <td>10000</td>
           </tr> 
        </tbody><br>
      </table>
  </div>
</div> 

<div class="modal" id="myModal">
        <div class="modal-dialog">
          <div class="modal-content">
                <form [formGroup]="studentupdateform" #updstu (ngSubmit)="updateStu(updstu)">
            <!-- Modal Header -->
            <div class="modal-header">
              <h4 class="modal-title" style="text-align: center">Update Student</h4>
              
            </div>
            
            <!-- Modal body -->
            <div class="modal-body" *ngFor="let student of studentlist " >
                <div [hidden]="isupdated">

                    <input type="hidden" class="form-control"  formControlName="student_id" [(ngModel)]="student.student_id">
                            <div class="form-group">
                                <label for="name">Student Name</label>
                                <input type="text" class="form-control"  formControlName="student_name" [(ngModel)]="student.student_name"  >
                            </div>
                    
                            <div class="form-group">
                                <label for="name">Student Email</label>
                                <input type="text" class="form-control" formControlName="student_email" [(ngModel)]="student.student_email">
                            </div>
                    
                            <div class="form-group">
                                <label for="name">Student Branch</label>
                                  <select class="form-control" formControlName="student_branch" required>                                   
                                    <option value="B-Tech" [selected]="'B-Tech' == student.student_branch">ZMS</option>
                                  </select>                               
                            </div>                   
                  </div>  
                  <div [hidden]="!isupdated">
                      <h4>Student Detail Updated!</h4>
                  </div>        
                    
            </div>
            
            <!-- Modal footer -->
            <div class="modal-footer" >
              <button type="submit" class="btn btn-success" [hidden]="isupdated">Update</button>
              <button type="button" class="btn btn-danger" data-dismiss="modal" (click)="changeisUpdate()">Close</button>
            </div>
            
        </form>
          </div>
        </div>
      </div>

No CSS has been added. If I attempt to place all columns in the same row, the Search field and entry count data are lost. I used a Spring Boot project from a website for assistance but have been stuck on this issue for hours. Any help would be greatly appreciated.