JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div class="column">
  <div>
    <h3>Lorem ipsum dolor sit amet.</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, cumque!</p>
  </div>
  <hr />
  <div>
    <h3>Debitis accusamus veniam, ad sint.</h3>
    <p>Et quibusdam consequatur, ab obcaecati harum ad voluptatum! Maxime, ad.</p>
  </div>
  <hr />
  <div>
    <h3>Amet officia error, corporis rem!</h3>
    <p>Nihil tempora qui fuga, consectetur velit dicta ipsa temporibus rerum.</p>
  </div>
  <hr />
  <div>
    <h3>Odi?</h3>
  </div>
</div>

SCSS

.column {
  display: flex;
  flex-flow: row nowrap;
  
  
  
  > div {
    background: peru;
    flex-basis: 0;
    flex-grow: 1;
    padding: 1em;
  }
  > hr {
    width: 1em;
    flex-grow: 0;
    border: 0;
  }
}