JSFiddle - React, Tailwind, and code Playground

by blackmiaool

HTML

<div class="container">
<div class="left">
Menu
</div>
<div class="right">
 <div class="header">
  <div>
   Some text here on the left
  </div>
  <div>
    <button>
    Some button
    </button>
  </div>
 </div>
 <div class="scrollable-container">
   <div class="sub-container">
   
   
   <div class="item">1</div>
   <div class="item">2</div>
   <div class="item">3</div>
   <div class="item">4</div>
   <div class="item">5</div>
   <div class="item">6</div>
   <div class="item">7</div>
   </div>
 </div>
</div>
</div>

CSS

.container {
  width: 100%;
  display: flex;
}

.left {
  width: 5em;
  border: 1px solid black;
}

.right {
  width: 100%;
  border: 1px solid black;
  display: flex;
  flex-direction: column;
}

.header {
  display: flex;
  justify-content: space-between;
}

.scrollable-container {
  overflow: scroll;
  width: 100%;
}
.sub-container{
  display: flex;
  justify-content: space-between;
}

.item {
  min-width: 3em;
  height: 2em;
  background-color: red;
  border: 1px solid green;
}