Un tableau HTML sans tableau

Bonsoir tout le monde !

Je travaille sur mon générateur de CV, et je pense qu’il est temps pour moi de régler un petit détail. Mais comme c’est de la mise en page, ben c’est toujours pas mon truc, et du coup me voilà.

Dans l’idée, j’aimerais réaliser une mise en page avec une structure comme le tableau ci-dessus — mais sans utiliser de tableau, afin de pouvoir faire joujou avec du responsive à l’occasion.

Pour l’instant, j’ai la structure HTML et le CSS disponibles dans ce fiddle, qui fait pratiquement ce que je souhaite, à grands renforts de marges et de positionnements flottants — probablement que certains sont inutiles d’une part parce que pas concernés par ce code, et d’autre part parce que, ma foi, ça date…
Je dis "pratiquement", parce que justement les données d’exemple pour la date font que, quand celle-ci prend deux lignes, l’intitulé de poste est décalé d’une ligne, alors que je trouverais plus logique que la date sur deux lignes n’ait pas d’influence à ce niveau et que l’intitulé de poste reste sous le nom de l’entreprise.

Comme j’ai réalisé l’exemple sous forme de tableau ci-dessus, j’ai tenté de jouer un peu avec display: grid, mais ça me pose problème parce que je ne sais pas à l’avance le nombre de réalisations, et si je les mets toutes dans une même zone, elles se superposent. Et en même temps, je ne suis pas certain que grid soit la meilleure solution dans mon cas, je suppose que flex pourrait aider, mais là je ne connais pas vraiment, et les exemples ne semblent pas montrer ce que je souhaiterais. Bon, mon squelette n’est peut-être pas complet non-plus.

Les largeurs en pixels sont prévues pour une mise en page A4 en évitant de tout mettre en !important dans la feuille de style @media print.

Est-ce que quelqu’un pourrait me dire comment il serait mieux de faire ?

Merci d’avance 

Merci à vous deux, je pense que j’ai réussi à avoir l’affichage que je souhaitais à l’écran !
Ne vous inquiétez pas, j’ai mis tout le CSS que j’utilise et pas seulement ce qui intéresserait dans notre cas comme je l’avais fait pour le premier. De toute façon, ce n’est pas nécessairement encore propre, je pense notamment à la partie nom de l’entreprise — lieu.

Et c’est là que je remarque qu’avec Firefox, j’ai des bizarreries à l’impression : des parties qui se chevauchent sans vraiment de raison apparente (des <details> qui mangent sur celui qui suit, voire même sur une toute autre partie après), flex n’étant apparemment pas super bien géré pour ce média.
Je vais devoir utiliser un navigateur WebKit juste pour générer les PDFs…