HTML, CSS dodawanie tekstu obok obrazka

Witam ! Mam pewien problem. Mianowicie wykonuje to co dodaj w linku. Okrąg ma się kręcić ( co już mam ) w środku ma byc obrazek ( to też mam ) , a do okoła takie jak widać małe nagłówki z którymi mam problem bo nie wiem jak je dodać. Ktoś jest w stanie mi pomóc ? :) chciałam to umieścic w jakimś containerze i po prostu umeiszczac tekst w span w jakiejs odleglosci od krawedzi ale cos sie pokopało i już nie potrafię do tego dojść. :/

https://gist.github.com/anonymous/150df2513e8cedc6fcb12d00e0ab31dc

obrazek poglądowy:
https://zapodaj.net/f49acc1ae0b82.jpg.html

Dziwny pomysł dość ale najbezpieczniej wydaje mi się zrobić kontener o stałych rozmiarach i do tego position: absolute na nagłówkach. Masz wtedy dowolne sterowanie pozycją elementów, bo tak na relatywnych pozycjach będzie ciężkawo.

Tak w kwestii tych kropek kręcących się - nie słyszałeś nigdy o SVG? Ew. JavaScript żeby te elementy wygenerować? Bo pisać 120 elementów i do tego CSS to powiem Ci, że hardcor...

Ja na swoje potrzeby opracowałem coś takiego:

// wymagane jQuery !

var round_allow = false; // dla dynamicznego zawieszenia obrotu (np w przypadku eventu hover na elemencie)
var elements_count= 5; // liczba elementow do obracania
var rou = 6.3;
var l = rou;
var r = 160; // promien kola na ktorym maja sie krecic elementy
var square_wid = 400; // bok kwadratu #parent_div
var item_wid = 204; // bok kwadratu elementu #cpi_
var square_margin_left = 0;
var square_margin_top = 0;

function generate_elements(n){
   elements_count = n;
$('body').append("<div style='width:"+square_wid +"px;height:"+square_wid +"px;position:fixed;top:50%;left:50%;margin-left:"+(square_wid /2)+"px;margin-top:"+(square_wid /2)+"px;'><div style='width:100%;height:100%;position:relative;' id='parent_div'></div></div>");
    for(x=0;x<n;x++){
       $('#parent_div').append("<div id='cpi_"+x+"' class='element' style='width:"+item_wid"px; height:"+item_wid+"px;position:absolute;background-color:red;border-radius:50%;'></div>");
   }
}

function menu_round(){
	if(round_allow==true){
		var c_obj = elements_count;
		var d_obj = rou/c_obj;
		for(c=0; c<c_obj; c++){
			l2 = l+(d_obj*c);
			var px = r*Math.sin(l2);
			var py = r*Math.cos(l2);
			$O = $('#cpi_'+c); // ID elementu, ktory ma sie obracac
			$O.css("left", ((square_margin_left+(square_wid/2)+px)-(item_wid/2))+'px');
			$O.css("top", ((square_margin_top+(square_wid/2)+py)-(item_wid/2))+'px');
		}
		l -= 0.005; // aby zmienic kierunek obrotu, zamiast -= daj +=
		if(l<0) l = rou; // a tutaj daj if(l>=rou) l = 0;
	}
}

setInterval(function(){ menu_round(); }, 10);

Dla swoich potrzeb nadaj odpowiednie style dla elementow :) mam nadzieje ze pomoglem choc troszke :) w razie pytan/dalszej pommocy z checia odpowiem.

Tutaj na filmiku widac jak dziala to obracajace sie menu
Uwaga: na urzadzeniach mobilnych a zwlaszcza po przyblizeniu widoku obrot zwalnia (nie wiem czemu) a czasem chodzi skokami jak by sie zawieszalo

 "<div style='width:"+square_wid +"px;height:"+square_wid +"px;position:fixed;top:50%;left:50%;margin-left:"+(square_wid /2)+"px;margin-top:"+.........

polecam template strings z ES6, ładniej by wyglądało:

`<div style='width:${square_wid}px;height:${square_wid}px;position:fixed;top:50%;left:50%;margin-left:${square_wid /2}px;margin-top:.. i tak dalej....................`

byłoby to czytelniejsze nawet jak robisz hakerkę z jQuery
https://developer.mozilla.org/pl/docs/Web/JavaScript/Referencje/template_strings :)