JSFiddle - React, Tailwind, and code Playground

by adelura

HTML

<h1>
Test
</h1>

<h2>flex</h2>

<div class="parent-flex">
  <div class="child-flex">
    <p>content content contentcontent content</p>
  </div>
  <div class="child-flex">
    <p>content content contentcontent contentcontent contentcontent content</p>
  </div>
   <div class="child-flex">
    <p>content content contentcontent</p>
  </div>
</div>

<h2>grid</h2>

<div class="parent-grid">
  <div class="child-grid">
    <p>content content contentcontent content</p>
  </div>
  <div class="child-grid">
    <p>content content contentcontent contentcontent ent content</p>
  </div>
  <div class="child-grid">
    <p>content content contentcontent</p>
  </div>
</div>

SCSS

p { all: unset; }

.parent-flex {
  outline: 1px solid red;
  
  @media (min-width: 800px) {
    display: flex;
  }
}

.child-flex {
  position: relative;
  outline: 1px solid green;
  padding: 10px;
  
  @media (min-width: 800px) {
    width: 100%;
  }
}

.child-flex:not(:last-child):after {
  position: absolute;
  background: black;
  display: block;
  content: '';
  
  @media (max-width: 799px) {
    bottom: -2px;
    right: 20%;
    width: 60%;
    height: 4px;
  }
  
  @media (min-width: 800px) {
    top: 20%;
    right: -2px;
    width: 4px;
    height: 60%;
  }
}

/* grid */

.parent-grid {
  outline: 1px solid red;
  
  @media (min-width: 800px) {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.child-grid {
  position: relative;
  outline: 1px solid green;
  padding: 10px;
}

.child-grid:not(:last-child):after {
  position: absolute;
  background: black;
  display: block;
  content: '';
  
  @media (max-width: 799px) {
    bottom: -2px;
    right: 20%;
    width: 60%;
    height: 4px;
  }
  
  @media (min-width: 800px) {
    top: 20%;
    right: -2px;
    width: 4px;
    height: 60%;
  }
}