JSFiddle - React, Tailwind, and code Playground

by geirby

HTML

<div>
  <div class="prop">
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita porro nulla doloribus adipisci magnam ullam est at enim eaque veniam, cupiditate quidem, aliquid maiores! Eaque numquam animi, dignissimos qui pariatur! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat dolorum inventore alias voluptas minus, eligendi sapiente optio hic facere ratione soluta cupiditate quod. Totam dolor nemo quo libero, quae incidunt.
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur minima laboriosam alias natus pariatur necessitatibus, molestias facere beatae ut possimus, hic dignissimos nihil. Provident expedita quia in tempora at veritatis?
    </div>
  </div>
  <div class="test">
    <div class="cat1">
      Cat1
    </div>
     <div class="cat2">
      Cat2
    </div>
  </div>
 
  <div style="background: yellow; width: 100%; margin-top: -100px;">
    <div class="switcher" >
       <div class="switcher-left">
         Left
       </div>
       <div class="switcher-right">
         Right
       </div>
    </div>
</div>

 
</div>

CSS

body > div {
	background: #ccc;
	display: flex;
	flex-wrap: wrap;
}
body > div > div {
	flex-grow: 1;
	//width: 50%;
	//height: 100px;
}
body > div > div:nth-child(even) {
	background: #23a;
}
body > div > div:nth-child(odd) {
	background: #49b;
}
.content {
/position: relative;
  z-index: 99999;
  background: brown;
  height: 100%;
}
.test {
  //position: relative; 
  //top: 100px;
  width: 70%;
  height: 200px;
  display: flex;
}

.cat1, .cat2{
  width: 50%;
  background: orange;
  border: 1px solid;
  text-align: center;
  height: 200px;
}

.switcher {
  background: green;
  width: 700px;
  height: 100px;
  //float: right;
  display: flex;
  position: relative;
  left: 32.5%;
}

.prop {
  background: red;
  min-height: 200px !important;
  width: 30%;
  position: relative;
  z-index: 999999;
}
.switcher-left {
  width: 50%;
  background: #ccc;
}