JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mainBox container elem">  
  <div class="leftCol">   
    <div class="elem bg_EEE">
      <p>Slider</p>
    </div>
    <div class="container">
      <div class="flex-column">
        <div class="elem bg_F3BE94">
          <p>Formular</p>
        </div>
        <div class="elem bg_696D23">
          <p>Box unten 2</p>
        </div>
      </div>
    </div>    
  </div>
  <div class="rightCol flex-column">    
    <div class="elem bg_947F7E">     
      <p>Logo</p>     
    </div>    
    <div class="elem bg_EF7778">
      <p>Leistung 1</p>     
    </div>
    <div class="elem bg_828A97">
      <p>Box</p>      
    </div>    
  </div>
</div>

CSS

* {
  box-sizing:border-box;
  margin:0;
  padding:0
}
.mainBox {
  width:960px;
  background:#FFF;
  border:6px solid #BBBFC2 !important;
  padding:3px;
  margin:auto 
}      
.container {      
  display:-webkit-flex;
  display:flex
}
.leftCol {
  width:600px
}
.flex-column {
  -webkit-flex:1;
  flex:1
}
.elem { 
  position:relative;
  border:3px solid #FFF
}
.innerLeftCol {
  width:50%
}
.bg_EEE {
  background:#EEE;
  height:200px
}
.bg_9C2829 {
  background:#9C2829;
  height:200px
}
.bg_F3BE94 {
  background:#F3BE94;
  height:100px
}
.bg_696D23 {
  background:#696D23;
  height:100px
}
.bg_947F7E {
  background:#947F7E;
  height:100px
}
.bg_EF7778 {
  background:#EF7778;
  height:200px
}
.bg_828A97 {
  background:#828A97;
  height:100px
}