JSFiddle - React, Tailwind, and code Playground

by Simon Harte

HTML

<div class="layout layout--misaligned">
  <div class="col"><span>test1</span></div>
  <div class="col"><span>test2</span></div>
  <div class="col"><span>test3</span></div>
</div>
<div class="layout layout--misaligned layout--gap-large">
  <div class="col"><span>test1</span></div>
  <div class="col"><span>test2</span></div>
  <div class="col"><span>test3</span></div>
</div>
<hr/>
<div class="layout layout--aligned">
  <div class="col"><span>test1</span></div>
  <div class="col"><span>test2</span></div>
  <div class="col"><span>test3</span></div>
</div>
<div class="layout layout--aligned layout--gap-large">
  <div class="col"><span>test1</span></div>
  <div class="col"><span>test2</span></div>
  <div class="col"><span>test3</span></div>
</div>

SCSS

:root {
  --gap: 20px;
}

.layout {
  display: flex;
  flex-flow: row nowrap;
  margin-bottom: 10px;
}

.layout--misaligned {
  gap: var(--gap);
  
  &.layout--gap-large {
    --gap: 60px;
  }
}

.layout--gap-large {
  .col {
    background: salmon;
  }
}

.layout--aligned {
  margin-left: calc(-1 * var(--gap));
  
  .col {
    margin-left: var(--gap);
  }
  
  &.layout--gap-large {
    --gap: 60px;
  }
}

.col {
  flex-basis: calc(33.333% - var(--gap));
  background: lime;
}