Двухколоночный (div) макет. Слева: фиксированный и прокручиваемый, текст с заголовками, справа: плавающий, изображение в заголовке в левом тексте

Чтобы рассказать историю с некоторыми изображениями, я хотел бы представить текст слева с возможностью прокрутки, а справа в идеале должно отображаться изображение для каждого заголовка.

Я новичок. Я еще столько не пробовал. Я знаю, как сделать дизайн с двумя столбцами, а не как связать изображения с заголовками/позицией в прокручиваемом тексте.

#content, html, body {
    height: 98%;
}
#left {
    float: left;
    width: 50%;
    background: red;
    height: 100%;
    overflow: scroll;
}
#right {
    float: left;
    width: 50%;
    background: blue;
    height: 100%;
    overflow: scroll;
}

Я надеюсь прокрутить текст в левом столбце и автоматически получить соответствующие изображения справа...