JSFiddle - React, Tailwind, and code Playground

by Jeremy Banks

HTML

<div class="example">
    <div class="block right">hello</div>
    <div class="block bottom"><div class="fooline"><br>world</div></div>
</div>

<div class="example">
    <div class="block right">hello</div>
    <div class="block bottom">world</div>
</div>

CSS

div.example {
    margin: 1em;
    position: relative;
    height: 4em;
    border: 1px solid black;
}

.inline { display: inline; }
.block  { display: block;  }
.down   { position: relative; top: 1em; }
.bottom { position: absolute; bottom: 0; }
.right { position: absolute; right: 0;  }
.a { line-height: 0; }
.fooline{ position: relative; line-height: 1em; }

JavaScript

/*

Whitespace is inserted between automatically-positioned block elements. So if we want some in our non-automatically positioned elements?

You nest another block inside it, and put a blank line at the top, then shift the box to fit.

*/ellowolowhello

worllloworhello

worl