.top_bar { display: flex; flex-direction: row; justify-content: space-between; margin-right: 2em; } .page_body { display: flex; flex-direction: row; justify-content: space-between; width: 100%; } .truth_list { display: flex; flex-direction: column; width: 50vw; padding-left: 1eM; } .individual_truth { padding-bottom: 2em; } .editor { width: calc(100% - 1.25em); /* The width is calculated *inside* the padding, so adjust for it. */ height: 6eM; font-size: large; padding: 0.5em; margin-bottom: 1em; } .graph { display: flex; flex-direction: column; align-content: center; margin-right: 2vw; width: 45vw; height: auto; } .graph > div { width: 100%; height: 80vh; position: sticky; top: 25%; } @media (orientation: portrait) { .truth_list { width: 60vw; } .graph { width: 35vw; } } /* Global styling */ hr { border: none; border-top: 2px solid #9ec5fe; color: #9ec5fe; overflow: visible; text-align: center; height: 5px; width: 100%; } blockquote { border-left: 2px solid #9ec5fe; padding-left: 1eM; margin-left: 1.5eM } blockquote > blockquote { margin-left: 0.5em; } body { margin-bottom: 10eM; } body > h2 { padding-left: 0.25eM; }