JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cask.scotch.io/bootstrap-4.0-flex.css">
<div class="container">
  <div class="row">
    <div class="col-xs-2">
      AA
    </div>
    <div class="col-xs-10">
    <div>BB</div>
      
    </div>
  </div>
    
  <div class="row">
    <div class="col-xs-6">
      CC
    </div>
    <div class="col-xs-6">
      DD
    </div>
  </div>
</div>

CSS

.container > .row:first-child > .col-xs-10 {
  position: absolute;
  margin-left: 16.7%;
  width: 100%;
}

.container > .row:first-child {
  position: relative;
}





body {
  background-color: lightgreen;
}

[class^="col"] {
  background: gold;
  border: 1px solid tomato;
}