.app { height: 100%; background-color: #ccc; display: flex; flex-direction: column; } .app > .app-header { flex: 0 0 32px; background-color: #ccc; align-items: center; text-align: center; justify-content: center; font-size: 25px; color: #282c34; } .inline-block { display: inline-block; } .app > .ace-editor { flex: 0 0 30%; position: relative; overflow: hidden; } .query-editor-wrapper, .query-editor-wrapper > * { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .query-editor-wrapper > * { overflow-y: auto; } .app > .executable-progress-bar { flex: 1; padding: 5px; } .app > .executable-actions { flex: 1; padding: 5px; } .app > .executable-actions > div { display: inline-block; margin-right: 5px; } .app > .result-table { flex: 0 1 50%; padding: 5px; }