JSFiddle - React, Tailwind, and code Playground

by michananya

HTML

<div class="containter">
    <div class="list">list</div>
    <div class="content">
      <div class="pro">
        <div class="grid">Grid</div>
        <div class="pro-info">info</div>
      </div>
    </div>
    <div class="additional">Additional</div>
</div>

CSS

html { 
  height: 100%;
}
body {
  margin: 0;  
  height: 100%;
}

.containter {
   display: flex;
  height: 100%;
  }

.list {
  width: 25%;
  max-width: 400px;
  flex-grow: 1;
  background-color: #f2f2f2;
}

@media all and (max-width: 1600px) { 
  .list {
    display: none;
  }
}

/************************************/


.content {
  flex-grow: 1;
  background-color: #ccc;
}
  .pro {
       display: flex;
justify-content: center;
  }


.grid {
  flex-grow: 2;
  background-color: #fff;
}

.pro-info {
  flex-grow: 1;
  background-color: #fff;
}

/************************************/

.additional {
  flex-grow: 1;
  max-width: 30%;
  max-width: 500px;
}

@media all and (max-width: 1400px) { 
  .additional {
    display: none;
  }
}