JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<div class="parent">Parent<br>
    <div class="sibling bordered">Sibling</div>
    <div class="sibling relative bordered">Relative Sibling
      <div class="child bordered">Child</div>
      <div class="child bordered">Child</div>
    </div>
    <div class="sibling bordered">Sibling</div>
  </div>
  <span class="light-olive">
    Sibling to the parent
  </span>

CSS

* {
      box-sizing: border-box;
      font-family: 'Source Sans Pro', sans-serif;
      font-weight: bold;
      font-size: 14pt;
    }
    .bordered {
      border: 2px solid #2e3d49;
    }
    .parent {
      height: 100%;
      background-color: #dbe2e8;
      padding: 8px;
    }
    .light-olive {
      background-color: #DFDFD1;
    }
    .relative {
      /* position: relative; */
      top: 50px;
    }
    .sibling {
      display: inline-block;
      background-color: #15C26B;
      width: 150px;
      vertical-align:top;
      height: 100px;
    }
    .child {
      background-color: #ffae0c;
    }