JSFiddle - React, Tailwind, and code Playground

by Kenneth Luplau-Brøgger

HTML

<div class="view">
  <div class="grid">
    <div class="column">1</div>
    <div class="column">2</div>
    <div class="column">
      <p>
        3
      </p>
      <p>
        3
      </p>
      <p>
        3
      </p>
      <p>
        3
      </p>
      <p>
        3
      </p>
      <p>
        3
      </p>
    </div>
  </div>
</div>

CSS

body {
  margin: 0;
  padding: 0;
}

.view {
  background: grey;
  padding: 1rem;
}

.grid {
  display: grid;
  grid-template: "1fr";
  column-gap: 2rem;
  row-gap: 1rem;
  position: relative;
}

.column {
  background: purple;
  position: relative;
}

@media (min-width: 600px) {
  .grid {
    grid-template: fit-content(100px) / fit-content(40%) / fit-content(40%);
  }

  .column+.column::before {
    content: "";
    display: block;
    height: 100%;
    width: 1px;
    background: black;
    position: absolute;
    left: -1rem;
  }
}