| <!DOCTYPE html> |
| <style> |
| .square { break-inside:avoid; width:20px; height:20px; background:hotpink; } |
| </style> |
| <p>There should be five consecutive squares below, from left to right: hotpink, blue, hotpink, blue, hotpink.</p> |
| <div id="multicol" style="columns:1; background:blue;"> |
| <div class="square"></div> |
| <div class="square" style="column-span:all;" id="spanner"></div> |
| <div class="square"></div> |
| </div> |
| <script> |
| document.body.offsetTop; |
| document.getElementById("multicol").style.writingMode = "tb-rl"; |
| document.getElementById("spanner").style.margin = "0 20px"; |
| </script> |
