*, *:before, *:after { box-sizing: border-box; } body { width: 90%; margin: 0 auto; padding: 0; font-family: Helvetica, Arial, sans-serif; font-size: 12px; } /** * Grid */ .grid { display: grid; grid-template-columns: [left] 25% [left-end center] auto [center-end right] 25% [right-end]; grid-template-rows: [top] 50% [bottom] 50% [bottom-end]; height: 100vh; } .left-sidebar { grid-column-start: left; grid-column-end: span left-end; grid-row-start: top; grid-row-end: span bottom-end; padding: 1rem; } .right-sidebar { grid-column-start: right; grid-column-end: right-end; grid-row-start: top; grid-row-end: span bottom-end; padding: 1rem; } .center-top { grid-column-start: center; grid-column-end: center-end; padding: 1rem; } .center-bottom { grid-column-start: center; grid-column-end: center-end; padding: 1rem; } input, select, option, button { font-size: inherit; width: 100%; } label { display: block; margin-bottom: 0.25rem; } table { width: 100%; border: 1px solid black; border-collapse: collapse; } td, th { border-bottom: 1px solid black; border-right: 1px solid black; padding: 0.25rem; } th { background: black; color: white; border: 1px solid black; } .order-form { margin-bottom: 1rem; } .row { width: 100%; display: flex; align-items: flex-end; } .field-set { flex-grow: 1; margin-right: 1rem; } .field-set:last-child { margin-right: 0; } .text-center { text-align: center; } .text-end { text-align: right; }