What's the best approach for building this grid?

Issue

I have a problem and i will be grateful if anyone helps me. I have been struggling with this grid for 2 days. I have to build a grid/table like this. What's the best approach? I tried using a table using bootstrap without success.

Solution

Calculate the height of upper-left row and set same top margin to the corresponding div in it's css.

//get height of div id "r1"
    var r1height = document.getElementById('r1').clientHeight;
    //get height of div id "r2"
    var r2height = document.getElementById('r2').clientHeight;
    //get height of div id "r3"
    var r3height = document.getElementById('r3').clientHeight;

//set margin top in r2's css which is equal to r1's height
    document.getElementById("r2").style.marginTop = r1height+"px";
    //set margin top in r3's css which is equal to (r1+r2)'s height
    document.getElementById("r3").style.marginTop = r1height+r2height+"px";
    //set margin top in r4's css which is equal to (r1+r2+r3)'s height
    document.getElementById("r4").style.marginTop = r1height+r2height+r3height+"px"; 

.fortable{
  overflow-x: auto;
  white-space: nowrap;
  display: block;
}
.left{
      
      border:solid thin black;
      width:49%;
      display:inline-block;
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="container-fluid">
      <div class="row">
        <div class="col">TEXT</div>
        <div class="col">TEXT</div>
        <div class="col">TEXT</div>
        <div class="col">TEXT</div>
      </div>
    </div>
    <div class="container-fluid">
      <div class="row">
        <div class="col fortable" id="r1">
          <div class="left">TEXT</div>
          <div class="left">TEXT</div>
          <div class="left">TEXT</div>
          <div class="left">TEXT</div>
        </div>
        <div class="col fortable" id="r2">
          <div class="left">TEXT</div>
          <div class="left">TEXT</div>
          <div class="left">TEXT</div>
        </div>
        <div class="col fortable" id="r3">
          <div class="left">TEXT</div>
          <div class="left">TEXT</div>
          <div class="left">TEXT</div>
          <div class="left">TEXT</div>
          <div class="left">TEXT</div>
          <div class="left">TEXT</div>
        </div>
        <div class="col fortable" id="r4">
           <div class="left">TEXT</div>
          <div class="left">TEXT</div>
          <div class="left">TEXT</div>
          <div class="left">TEXT</div>
          <div class="left">TEXT</div>
        </div>
      </div>
    </div>

Answered By - Vicky Maharjan