How to Create a Bootstrap Table Layout with a responsive but minimum width column as left column, and scrollable right column

I am close to achieving this look and behavior but I am having issues with the scrolling of the right column. Should look like this: ESPN reference. Currently looks like this: enter image description here. There are probably multiple approaches or changes I can take or make but any suggestions are welcome! Code is provided below.

CSS:

.scroller {
    overflow-x: scroll;
    white-space: nowrap;
}

.row {
    display: flex;
    flex-wrap: nowrap;
}

.col-md-4 {
    min-width: 240px;
}

.col-md-8 {
    flex-grow: 1;
}

HTML:

   <div class="col-4" style="min-width: 240px;">
      <div class="row pb-1">
         <div class="col-3 offset-3">
            <b>NAME</b>
         </div>
      </div>
      <div class="row row-striped align-items-center pb-1 pt-1">
         <div class="col-3">
            <img src="https://media.api-sports.io/football/players/730.png" alt="player photo" width="40px" height="40px">
         </div>
         <div class="col-9 player-table-text">
            <div>
               Thibaut Courtois
               开发者_如何学JAVA<span class="ps-1 player-number-text">1</span>
            </div>
         </div>
      </div>
   </div>
   <div class="col scroller" style="min-width: 500px;">
      <div class="row pb-1">
         <div class="col-2 offset-1">
            <b>POS</b>
         </div>
         <div class="col-2">
            <b>AGE</b>
         </div>
         <div class="col-2">
            <b>HT</b>
         </div>
         <div class="col-2">
            <b>WT</b>
         </div>
         <div class="col-2">
            <b>NAT</b>
         </div>
      </div>
      <div class="row row-striped align-items-center pb-1 pt-1 player-table-text" style="height:48px;">
         <div class="col-2 offset-1">
            GK
         </div>
         <div class="col-2">
            30
         </div>
         <div class="col-2">
            6' 7"
         </div>
         <div class="col-2">
            212 lbs
         </div>
         <div class="col-2">Belgium</div>
      </div>
   </div>
</div>