JSFiddle - React, Tailwind, and code Playground

by Darren Galway

HTML

<div class="container">
  <div class="child">
    <div class="content">dasdasddfasdfasdfas</div>
    <div class="content">dasdasddfasdfasdfas</div>
    <div class="content">dasdasddfasdfasdfas</div>
    <div class="content">dasdasddfasdfasdfas</div>
    <div class="content">dasdasddfasdfasdfas</div>
    <div class="content">dasdasddfasdfasdfas</div>
    <div class="content">dasdasddfasdfasdfas</div>
    <div class="content">dasdasddfasdfasdfas</div>
    <div class="content">dasdasddfasdfasdfas</div>
    <div class="content">dasdasddfasdfasdfas</div>
    <div class="content">dasdasddfasdfasdfas</div>
  </div>
    <div class="child">
    <div class="content">dasdasddfasdfasdfas</div>
    <div class="content">dasdasddfasdfasdfas</div>
    <div class="content">dasdasddfasdfasdfas</div>
    <div class="content">dasdasddfasdfasdfas</div>
    <div class="content">dasdasddfasdfasdfas</div>
    <div class="content">dasdasddfasdfasdfas</div>
    <div class="content">dasdasddfasdfasdfas</div>
    <div class="content">dasdasddfasdfasdfas</div>
    <div class="content">dasdasddfasdfasdfas</div>
    <div class="content">dasdasddfasdfasdfas</div>
    <div class="content">dasdasddfasdfasdfas</div>
  </div>
    <div class="child">
    <div class="content">dasdasddfasdfasdfas</div>
    <div class="content">dasdasddfasdfasdfas</div>
    <div class="content">dasdasddfasdfasdfas</div>
    <div class="content">dasdasddfasdfasdfas</div>
    <div class="content">dasdasddfasdfasdfas</div>
    <div class="content">dasdasddfasdfasdfas</div>
    <div class="content">dasdasddfasdfasdfas</div>
    <div class="content">dasdasddfasdfasdfas</div>
    <div class="content">dasdasddfasdfasdfas</div>
    <div class="content">dasdasddfasdfasdfas</div>
    <div class="content">dasdasddfasdfasdfas</div>
  </div>
    <div class="child">
    <div class="content">dasdasddfasdfasdfas</div>
    <div class="content">dasdasddfasdfasdfas</div>
    <div class="content">dasdasddfasdfasdfas</div>
    <div...

SCSS

body {
  font-family: sans-serif;
}

.container {
  width: 600px;
  margin: 100px auto;
  overflow-x: auto;
  border: 1px solid #ccc;

  .child {
    display: inline-grid;
    grid-gap: 0;
    grid-auto-columns: minmax(300px, 15%);
    grid-auto-flow: column;
    width: auto;
    
    &:nth-child(even) {
      background: #eee;
    }
    
    &:not(:last-of-type) {
      margin-bottom: 0;
      border-bottom: 1px solid #ccc;
    }
    
    .content {
      padding: 1rem;
      border-right: 1px solid #ccc;
    }
  }
}