8.html

<!DOCTYPE html>
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>

<div id="controls">
  <label>E - margin-top <input type="number" value="0" step="10" />px</label>
</div>

<pre><code class="html"></code></pre>

<fc>
<div id="A" style="width: 30px;" float-left></div>
<div id="B" style="width: 30px; height: 100px;" float-right></div>
<div id="C" style="width: 30px; height: 60px;" float-right></div>
<div id="D" style="width: 30px; height: 40px;" float-right></div>
<div id="E" style="position: relative;" inflow>X X X X X X X X X X X X X X X X X X X X</div>
</fc>

<script src="script.js"></script>