Estoy trabajando en el sitio web de una agencia de vuelos y, en algún momento, necesito trazar algunas líneas entre los elementos que se agregan dinámicamente.

Ver la imagen para entender lo que estoy tratando de hacer:

Supongamos que para cada salida y destino hay 2 divs, ¡uno para la salida y otro para el destino!

Ejemplo: los siguientes elementos se agregarán al DOM dinámicamente según la respuesta de la API para los vuelos.

 <!--First flight--> <div className="flight"> <div className="element">Bucharest<div> <!--image element here--> <div className="element">Tenerife<div> </div> <!--Second flight--> <div className="flight"> <div className="element">Tenerife<div> <!--image element here--> <div className="element">Bucharest<div> </div>

Encontré algunas soluciones de Javascript, pero necesito especificar qué elementos están involucrados, lo que no puedo hacer en mi caso porque los elementos se agregan dinámicamente según la cantidad de vuelos.

Sería preferible encontrar una solución solo con CSS, pero creo que eso podría ser imposible.

¡Gracias!