<!DOCTYPE html>
<style>
    .mc { -webkit-columns:2; -webkit-column-gap:16px; column-fill:auto; padding:0 5px; }
</style>
<p>Below there should be a multicol inside a multicol inside a multicol.</p>
<p>The innermost multicol (papayawhip, thin column rules) should have a total of eight columns and
    consist of twelve lines. Each line should have a letter, from A to L, ascendingly.</p>
<p>The middle multicol (salmon, medium column rules) should have four columns. The first line in the
    first line should say "middle first". Then comes the inner multicol, followed by the last line
    in the last column, which should say "middle last".</p>
<p>The outermost multicol (lime, thick column rules) should have two columns. The first line in the
    first column should say "outer first". Then comes the middle (and inner) multicol, followed by
    the last line in the last column, which should say "outer last".</p>
<p>Rules should be drawn between columns in the same row.</p>
<div style="line-height:2em; width:572px; orphans:1; widows:1;">
    <div class="mc" style="height:6em; -webkit-column-rule:solid 8px; background:lime;">
        outer first
        <div class="mc" style="height:8em; -webkit-column-rule:solid 4px; background:salmon;">
            middle first
            <div class="mc" style="height:12em; -webkit-column-rule:solid 2px; background:papayawhip;">
                A<br>
                B<br>
                C<br>
                D<br>
                E<br>
                F<br>
                G<br>
                H<br>
                I<br>
                J<br>
                K<br>
                L<br>
            </div>
            middle last
        </div>
        outer last
    </div>
</div>