JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div class="foo">
  <div class="bar">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam, qui.</div>
</div>

<div class="foo">
  <div class="bar">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam, qui.</div>
  <div class="bar">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum dolor, itaque rerum numquam debitis eius error impedit asperiores laborum praesentium.</div>
</div>

<div class="foo">
  <div class="bar">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam, qui.</div>
  <div class="bar">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum dolor, itaque rerum numquam debitis eius error impedit asperiores laborum praesentium.</div>
  <div class="bar">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat quibusdam quam beatae sapiente deleniti eius, quidem inventore. Accusamus dolore iure excepturi quibusdam ullam, libero! Aspernatur repudiandae praesentium officiis quis excepturi.</div>
</div>

SCSS

.foo {
  display: flex;
  
  .bar {
    margin-bottom: 30px;
    flex: 1;
  }
  
  .bar:nth-child(n + 2) {
    margin-left: 30px;
  }
}