JSFiddle - React, Tailwind, and code Playground

by Rolf

HTML

<h1>Fun with margins</h1>
<hr>
<div class="X floated">(1) I am the X / floated </div>
<div class="Y">and I'm searching for Y / regular</div>
<hr>
<div class="X floated">(2) I am the X / floated</div>
<div class="Y cleared">and I'm searching for Y / cleared</div>
<hr>
<div class="X relatived">(3) I am the X / pos relative</div>
<div class="Y relatived">and I'm searching for Y / pos relative</div>
<hr>
<div class="X with-bfc">(4) I am the X / BFC created</div>
<div class="Y with-bfc">and I'm searching for Y / BFC created</div>

CSS

hr { clear: both; }

.X { margin-bottom: 50px; }
.X::before {
  position: absolute; content: " ";
  width: 100px; height: 50px; translate: 0 1em;
  background-color: #ccf8;
}
.Y { margin-top: 50px; }
.Y::before {
  position: absolute; content: " ";
  width: 100px; height: 50px; translate: 33px -50px;
  background-color: #fcc8;
}
.floated { float:left; }
.cleared { clear: both; }
.relatived { position: relative; }
.with-bfc { display: flow-root; }