<!DOCTYPE html> <html> <link rel='stylesheet' type='text/css' href='style.css'> <style> .meter-element { margin: 10px; } body > div:nth-child(1) > .meter-bar { position: relative; top: 4px; left: 4px; height: calc(100% - 8px); } body > div:nth-child(2) > .meter-bar { width: calc(100% + 8px); } body > div:nth-child(3) > .meter-bar { position: relative; top: 4px; left: 4px; height: calc(100% - 8px); width: calc(100% + 8px); } body > div:nth-child(4) > .meter-bar { position: relative; top: 10px; height: calc(100% - 10px); } body > div:nth-child(5) > .meter-bar { } body > div:nth-child(6) > .meter-bar { height: calc(100% - 10px); } body > div:nth-child(7) > .meter-bar { position: relative; left: 10px; } body > div:nth-child(8) > .meter-bar { } body > div:nth-child(9) > .meter-bar { width: calc(100% + 10px); } body > div:nth-child(10) > .meter-bar { } body > div:nth-child(11) > .meter-bar { width: calc(100% + 10px); } /* 12 - 15 should have 100% width, no need to specify. */ body > div:nth-child(16) > .meter-bar { position: relative; top: 64px; left: 64px; height: calc(100% + 32px + 16px); width: calc(100% + 128px + 16px - 1em); } </style> <body> <div class="meter-element vertical"> <div class="meter-bar"> </div> </div> <div class="meter-element vertical"> <div class="meter-bar"> </div> </div> <div class="meter-element vertical"> <div class="meter-bar"> </div> </div> <div class="meter-element vertical"> <div class="meter-bar"> </div> </div> <div class="meter-element vertical"> <div class="meter-bar"> </div> </div> <div class="meter-element vertical"> <div class="meter-bar"> </div> </div> <div class="meter-element vertical"> <div class="meter-bar"> </div> </div> <div class="meter-element vertical"> <div class="meter-bar"> </div> </div> <div class="meter-element vertical"> <div class="meter-bar"> </div> </div> <div class="meter-element vertical"> <div class="meter-bar"> </div> </div> <div class="meter-element vertical"> <div class="meter-bar"> </div> </div> <div class="meter-element vertical"> <div class="meter-bar"> </div> </div> <div class="meter-element vertical"> <div class="meter-bar"> </div> </div> <div class="meter-element vertical"> <div class="meter-bar"> </div> </div> <div class="meter-element vertical"> <div class="meter-bar"> </div> </div> <div class="meter-element vertical"> <div class="meter-bar"> </div> </div> </body> </html>