1) in alcuni casi il testo potrebbe non rimanere su una riga
[...]
ma se sta nella sua "cella"
Ecco, appunto, la sua "cella" da cosa è composta?
L'oggetto della discussione non è forse "span che simuli una table-cell"?

Se il tutto deve comportarsi come una tabella (con le sue celle), è chiaro che le celle vanno definite in modo preciso e inequivocabile, proprio come per i tradizionali <td> di una <table>.

Per capire opportunamente la questione bisogna comunque valutare il comportamento dei vari elementi in gioco; è necessario avere ben chiara la differenza di comportamento tra elementi a livello "inline" e quelli a livello "block" o "inline-block".

Ci vorrebbe un wikipedia per chiarire bene questi concetti e non è questa la sede opportuna. Ti invito eventualmente a consultare le opportune documentazioni e guide. Tra i link utili CSS trovi un po' di materiale che può essere utile, appunto, a chiarire tali concetti.

Giusto a grandi linee, il normale testo è di per sé "inline", cioè ha un comportamento simile ad un liquido, per cui sta limitatamente dentro il proprio contenitore ma può comunque "scorrere" attorno ad altri elementi che si trovano dentro lo stesso contenitore.

Il testo lasciato libero, dentro quel tuo <p>, segue il normale flusso del testo che lo porta a "scorrere" attorno agli altri eventuali elementi posti nel flusso del testo.

Se gli togli lo <span> (che lo avrebbe tenuto delimitato) come pensi che si comporterebbe?
Quali sarebbero i limiti entro cui deve stare quella parte di testo (il titolo)?

Se non gli dai in qualche modo dei limiti, non hai certezza che questo resti incolonnato entro quei limiti.
Ad esempio, se il titolo si dovesse portare su due righe e il testo del contenuto su un'unica riga, cosa succederebbe?
Probabilmente il titolo, non avendo dei limiti, "scorrerebbe" sotto lo <span> del testo (che è impostato come inline-block).

Forse puoi usare quel <b>, come "cella" per il titolo, ma ciò non toglie che andrebbe sempre applicato del css per definirne opportunamente i suoi limiti.

Spero di aver chiaro questo punto. Poi vedi tu come preferisci impostare la cosa.

2) le icone potrebbero prendere spazio, ma è anche vero che non stanno dentro il <p>, sono generate altrove
Sbagli.
Anche qui ci vorrebbe un wikipedia per chiarire il discorso ma riassumo in poche parole: sono pseudo-elementi, generati dentro quei <p>. Nel CSS trovi il selettore ::before applicato per ciascuno di quei <p> per definire la relativa icona.
Ad esempio per il primo <p> trovi:
codice:
.contact-info-sidebar .address::before {
    content: "\f041";
}
3) le regole sono le seguenti (perchè, l'ordine influisce?)
Altro wikipedia.
L'ordine in cui sono scritte (e quindi lette) le regole CSS è la peculiarità dei CSS; per questo si chiamano "Cascading Style Sheets" (fogli di stile a cascata). Questo può influire assieme ad altri fattori come la "specificità", per il discorso dell'override (la prevalenza delle regole rispetto ad altre).

Vedi concetti come override e specificità.
Al capitolo "2. Come funzionano i CSS" dei link utili CSS puoi trovare vari riferimenti a riguardo sotto la voce "Specificità, ereditarietà, override".

Quindi non utilizzo un selettore "nome tag" (non saprei come utilizzarlo)
Questo selettore ".contact-info-sidebar p span" seleziona tutti gli elementi <span> dentro quel <p>, non solo il titolo (il tuo commento in quella riga è impreciso); per questo motivo le regole sono applicate ad entrambi gli span.

Mentre questo ".contactinfodata" seleziona chiaramente lo span con questa specifica classe (cioè solo quello col testo, e non il titolo) ma ti è stato necessario applicare !important per width perché su questo span era già stata applicata la relativa proprietà attraverso la precedente regola, appunto, che ha priorità rispetto a questa (leggasi "specificità").

Chiaramente puoi applicare dei selettori più specifici per identificare meglio tali elementi, ma la cosa si può risolvere in vari modi, è inutile che ti dica "applica una classe anche al primo span" o "usa il selettore :nth-child()" o "usa flex-box senza bisogno di specificare delle classi" o "usa CSS Grid" o altri cento modi per risolvere, se poi non hai chiaro come la cosa funzioni e resti a ribattere sulle tue idee e convinzioni.

4) voglio ottenere che i titoli stiano al loro posto
...
Credimi, ho capito ciò che vuoi ottenere e avevo già valutato le varie problematiche a seconda delle possibili soluzioni che si possono adottare ma a me preme più far capire come arrivare alla soluzione.

Da quel poco che ho potuto conoscerti qui sul forum, so che sei una persona intelligente ma anche un po' caparbia, per cui non ti darò un codice copia/incolla senza prima averti fatto ragionare su come poter raggiungere un risultato soddisfacente.

Se poi qualche altro utente vuole contribuire fornendoti delle soluzioni già pronte, è chiaramente benvenuto

testi lunghi (come quelli del campo sitoweb>link) non rispettano la loro posizione
Chiarisci "non rispettano la loro posizione". Io vedo che il titolo "sitoweb" è leggermente spostato a destra rispetto agli altri, ma questo è dovuto al fatto che l'icona (generata col ::before dentro quel <p>) è leggermente più larga rispetto alle altre, e che tale elemento, non avendo una larghezza fissata, va ad occupare il suo dovuto spazio all'interno del flusso del testo, portando quindi leggermente più a destra il titolo e il resto el testo.

Forse può essere buono fissare delle dimensioni uguali per tutte le icone. Tu che dici?

PS. nel mio vecchio sito era molto semplice
Usa quel sistema allora. Chi te lo impedisce?

Prova però a cambiare il titolo "volume affari" con quello più lungo "movimentazione voli annuale" (come tu stesso mi hai accennato) e vedi che succede ... io vedo dei testi che si sovrappongono.

Magari era anche semplice ma non proprio ottimale. Tu che pensi?


Fai sapere se sono riuscito a chiarire qualche dubbio e come eventualmente pensi si possa proseguire.

HINT: io andrei di flex-box


PS: perdona la lungaggine