Help: Creating User Manual page using CMS + multi-reference

I am trying to create a web version of a user manual using webflow CMS. UI design has two columns – one, containing Chapters & Topics collections list, the other containing Topics collection’s rich-text manual content. On load, only Chapter list is shown in first column (and second column is hidden). When a Chapter item is clicked, the Topics collection list is shown. Then – and this is what I can’t figure out – when a Topic item is clicked, the content view column is populated with Topic collection’s rich-text content.

This is my basic wireframe sequence:

LOAD STATE:

CHAPTER-SELECTED STATE:

TOPIC-SELECTED STATE:

NOTE: As my description suggests, I am working with two CMS collections: 1) “Topics”, which contains topic names and rich-test manual content and 2) Chapters, which contains chapter names and multi-reference to Topics collection.

Easy enough to get the Topics to show when a chapter is clicked, but can’t figure out how to display rich-text content when a topic is clicked without a creating huge break (height of rich-text content) in the Topics list (plus various other undesirable artifacts, etc), as seen here:

Can I accomplish what I’m trying to accomplish using Webflow, or should I come up with another UI approach?

Thank you in advance!
Nick

Can you share your read-only link?