<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .table { display: table; width: 100px; table-layout: fixed; margin-bottom: 2px; } .table > * { box-sizing: border-box; display: table-cell; height: 30px; } .withPadding { padding: 10px; } .withBorder { border: 2px solid black; } .thin { width: 25%; } .wide { width: 75%; } .teal { background: teal; } .purple { background: purple; } </style> </head> <body> <div class="table"> <div class="thin teal"></div> <div class="wide purple"></div> </div> <div class="table"> <div class="thin withPadding teal"></div> <div class="wide withPadding purple"></div> </div> <div class="table"> <div class="thin withBorder teal"></div> <div class="wide withBorder purple"></div> </div> <div class="table"> <div class="thin withBorder withPadding teal"></div> <div class="wide withBorder withPadding purple"></div> </div> </body> </html>