JSFiddle - React, Tailwind, and code Playground

by geirby

HTML

<div class="box flex">
  <div class="a">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque at ut quas veniam odit, laboriosam rem ea aspernatur a, enim ducimus quod! Sint culpa optio, eveniet, numquam eum magnam in!
  </div>
  <div class="b-c flex column">
    <div class="b">
      <div class="cat1">
      Cat1
    </div>
     <div class="cat2">
      Cat2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, perferendis reprehenderit nobis temporibus totam, 
    </div></div>
    <div class="c">
       <div class="switcher-left">
         Left
       </div>
       <div class="switcher-right">
         Left
       </div>
     
     </div>
  </div>
<div>

CSS

.box {
  display: flex;
  //align-items: stretch;
  width: 300px;
}
.a {
  flex: 0 0 150px;
  border: 1px solid;
}
.b {
  height: 200px;
  display: flex;
  
}
.b div {
  border: 1px solid;
}
.c {
   display: flex;
   border: 1px solid;
   
}
.switcher-left, .switcher-right  {
  flex-grow: 1;
  border: 1px solid;
}
.b-c {
  flex-direction: column;
  display: flex;
  flex-grow: 1;
  //border: 1px solid;
}

div {
  
}