9.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>B - margin-top <input type="number" value="0" step="10" />px</label>
  <label>C - width <input type="number" value="50" step="10" />px</label>
  <label>D - margin-top <input type="number" value="0" step="10" />px</label>
</div>

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

<fc>
<div id="A" style="width: 150px;" float-left></div>
<div id="B" style="" empty>
  <div id="C" style="" float-left></div>
  <div id="D" style="" empty></div>
</div>
<div id="E">E</div>
</fc>

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