* {
    margin: 0;
    box-sizing: border-box;
    --headerheight:4em
}
#header {
    height: var(--headerheight);
    background: pink;
    text-align: center;
    position: sticky;
    top: 0;
}
h2 {
    text-align: center;
    padding: 3em;
}
.timeline {
    height: calc(100vh - var(--headerheight));
    width: 100%;
    overflow: scroll;
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-template-rows: 2em 1fr;
    grid-template-areas: "aside header" "aside content";
}

.timeline header {
    grid-area: header;
    background: yellow;
    position: sticky;
    top: 0px;
    z-index:1;
    display: flex;
    white-space: nowrap;
    height: 2em;
    left: 0;
}

.timeline aside {
    width: 200px;
    background: white;
    position: sticky;
    left: 0;
    top: 0;
    z-index: 3;
    grid-area: aside;
}
.timeline content{
    display: flex;
  align-items: start;
  white-space: nowrap;
  background: turquoise;
  height: 100%;
  width: 100%;
  grid-area: content;
}