<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> body { font-size: 10px; } div { width: 100px; height: 200px; margin: 5px; border: 1px solid silver; display: inline-block; vertical-align: top; } p { inline-size: 100%; margin: 0; } span { display: inline-block; width: 20px; height: 20px; background: green; position: relative; } </style> </head> <body> <div> <p><span style="left: 20px;"></span></p> </div> <div> <p><span style="left: 60px;"></span></p> </div> <div> <p><span style="top: 40px;"></span></p> </div> <div> <p><span style="top: 140px;"></span></p> </div> <div> <p><span style="top: 40px; left: 80px;"></span></p> </div> <div> <p><span style="top: 140px; left: 80px;"></span></p> </div> <br> <div> <p><span style="left: 20px;"></span></p> </div> <div> <p><span style="left: 60px;"></span></p> </div> <div> <p><span style="top: 40px;"></span></p> </div> <div> <p><span style="top: 140px;"></span></p> </div> <div> <p><span style="top: 40px;"></span></p> </div> <div> <p><span style="top: 140px;"></span></p> </div> </body> </html>