JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <div class="left-panel col-xs-6">
      COL 1
    </div>
    
    <div class="right-panel-col-1 col-xs-3">
      <div class="row">
        <!--columns inside the row-->
        <div class="col-xs-12 right-top">
          <div class="row">
            <div class="col-xs-6 right-top-1">
              col 1 inside row1
            </div>
            <div class="col-xs-6 right-top-2">
              col 2 inside row1
            </div>
          </div>
        </div>
        <!--columns inside the row end-->
      </div>
      <div class="row">
        <div class="col-xs-12 right-bottom">
          row 2 (all these above come under COL 2)
        </div>
      </div>  
    </div>
    
    <div class="right-panel-col-2 col-md-3 col-sm-3 col-xs-3">
     COL 3
    </div>
  </div>
</div>

CSS

.left-panel {
  background: red;
  height: 200px;
}

.right-panel-col-2{
  background: blue;
  height: 200px;
}

.right-top {
  height: 100px;
}

.right-bottom {
  background: green;
  height: 100px;
}

.right-top-1{
  background: aqua;
  height: 100px;
}

.right-top-2 {
  background: violet;
  height: 100px;
}