JSFiddle - React, Tailwind, and code Playground

by philippkuehn

HTML

<div class="wrapper">
  <div class="div1">
      Sidebar Content Sidebar Content Sidebar Content Sidebar Content Sidebar Content Sidebar Content Sidebar Content Sidebar Content Sidebar Content Sidebar Content Sidebar Content Sidebar Content 
  </div>
  <div class="div2">
      div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 
  </div>
  <div class="div3">
      div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 
  </div>
    <div class="div3">
      div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 div3 
  </div>
</div>

CSS

.wrapper {
    padding: 20px;
    min-width: 500px;
    width: 50%;
    margin: 0 auto;
}

.wrapper > div {
    max-width: 300px;
}

.div1 {
    background: #ddd;
    float: left;
    width: 100px;
}

.div2 {
    background: #ccc;
}

.div3 {
    background: #bbb;
}

.div2, .div3 {
    margin-left: 120px;    
}