Versuche, die kleinsten verschachtelten Kreise mit CSS zu machen

Ich arbeite an einer Vue-Komponente, wo der Benutzer Kreise zu anderen Kreisen hinzufügen kann, mit Unterstützung für unbegrenzte Verschachtelungsebenen, aber mit einigen Problemen mit CSS.

Hier ist eine vereinfachte Version des Problems:

Ich versuche, so etwas zu erreichen.

Ich dachte, flexbox wäre eine gute Wahl für diesen Job, aber kann es nicht funktionieren, wie ich es will, es endet immer viel zu groß und nicht in separaten Zeilen oder brechen aus den Kreisen.

Ich habe diesen Ansatz versucht, bin offen für eine neue Struktur, wenn es einen einfacheren Weg gibt, dies zu tun. Solange der Kreis einen Titel und Inhalt hat, dachte man daran, before und after für den Titel und den Inhalt zu verwenden, um die Struktur zu vereinfachen, aber diese Option noch nicht untersucht zu haben.

oder als jsfiddle.net-Link

Alle Eingaben sind willkommen, danke :)