body { margin: 0; font: 12px arial, sans-serif; } * { box-sizing: border-box; } .container { display: flex; min-height: 100vh; align-items: stretch; } .header { width: 280px; padding: 15px; border-right: 1px dashed #aaa; box-shadow: 0 0 50px -18px black; overflow-wrap: break-word; } .header :first-child { margin-top: 0; } h1 small { font-size: 0.6em; } .meta-version::before { content: " v"; } .warning { padding: 3px 6px; border: 1px dashed black; border-color: #ef6969; background: #ffe2e2; } .header .warning { margin: 3px 0; } .actions { margin: 15px 0; } .actions label { width: fit-content; width: -moz-fit-content; display: flex; align-items: center; margin: 0.5em 0; } .actions label input { margin: 0 0.5em 0 0; } .external { text-align: center; } .external > * { margin: 0 7.5px; } .code { padding: 2em; font-family: monospace; white-space: pre-wrap; } .main { flex-grow: 1; overflow: hidden; overflow-wrap: break-word; }