JSFiddle - React, Tailwind, and code Playground

by michananya

HTML

<div class="content">

 <div class="grid">
   Grid
 </div>
 <div class="info">
 Additional info
 </div>

</div>
<div class="sidebar">
 side bar
</div>

CSS

html {
  height: 100%;
}
body {
  margin: 0;
  height: 100%;
  box-sizing: border-box;
  background-color: #eee;
}
.content {
  width: calc(100% - 350px);
  background-color: #fff;
  height: 100%;
  display: inline-block;
  vertical-align: top;
  padding: 16px;
  box-sizing: border-box;

}
.sidebar {
  display: inline-block;
  vertical-align: top;
  padding: 16px;
}

.grid {
  width: calc(100% - 320px);
  height: 400px;
  min-width: 500px;
  max-width: 100%;
  display: inline-block;
  vertical-align: top;
  background-color: #eee;
  padding: 16px;
  box-sizing: border-box;
  margin-bottom: 16px;

}

.info {
  width: 300px;
  height: 400px;
  background-color: #eee;
  display: inline-block;
  vertical-align: top;
  padding: 16px;
  box-sizing: border-box;
}