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;
  width: 75%;
  left: 0;
  margin-left: 25%;
}

.container > .row:first-child > .col-xs-2 {
    flex-grow: 1;
}

body {
  background-color: lightgreen;
}

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