JSFiddle - React, Tailwind, and code Playground

by alexb

HTML

<div class="a">
  Parent
  <span class="aa">Child</span>
  <span class="ab">Sibling</span>
</div>

<div class="b">
  Parent
  <span class="aa"></span>
  <span class="bb">Sibling</span>
</div>

<div class="c">
  Parent
  <span class="ca">Child</span>
  <img class="cb" src="https://i.redd.it/xbv3ig090ld21.jpg" width="128">
</div>

<div class="d">
  Parent
  <span class="da"></span>
  <img class="db" src="https://i.redd.it/xbv3ig090ld21.jpg" width="128">
</div>

CSS

span { display: inline-block; }
.a { background: rebeccapurple; }
.b { background: cornflowerblue; }
.c { background: rosybrown; }
.d { background: lightcoral; }
.aa, .ba, .ca, .da {
  background: rgba(255, 255, 255, 0.3);
  height: 100px;
  min-width: 30px;
}
.ab, .bb { height: 70px; }
.ab, .bb, .cb, .db { background: rgba(0, 0, 0, 0.3); }