Need columns with different width oder table without frame (in text block)

make a unordered list in a textblock – give a custom class to it – f.e.: my-listings
mark the years and make them bold via tiny-mce button

then just put this to your quick css:

.my-listings ul {
  list-style: none !important;
}

.my-listings li {
  display: grid;
  margin: 0;
  gap: 0 30px;  
  grid-auto-flow: row;
  grid-template-columns: 140px 1fr; 
  justify-content: start;
}

.my-listings li strong {
  font-weight: normal;
  justify-self: end;     /** now your years "float" right. **/
}

and:

/* === responsive styling === */
@media only screen and (max-width: 469px) {
  .my-listings li {
    grid-template-columns: 1fr;
    justify-content: center;
  }

  .my-listings li strong {
    font-weight: normal;
    justify-self: start;
  }
}

see your list including css code on : https://webers-testseite.de/joeconnert/

making the years bold will set the html to :
<li><strong>2011 – 2012</strong> Medizinische Trainingstherapie (Diemer & Sutor)</li>
So we have the option of selecting them separately. And bring them in a grid-layout

This: grid-template-columns: 150px 1fr;
determines the “column” width – the first one (the strong years) will have width of 150px – the other “column” fills the rest (fr: means fraction)

ich weiss ehrlich gesagt nicht warum du dir das leben schwer machst.
Einfach eine Liste anlegen innerhalb eines Text-Blocks – die Jahre fett setzen, und dann nur noch diese Text Element mit einer Klasse belegen.
Den Rest macht das CSS. Da musst du nicht einmal html code setzen – oder ein Tabellen Plugin nutzen etc. Pures Enfold.

css auf der Seite: https://webers-testseite.de/joeconnert/

_________

To be honest, I don’t know why you’re making life difficult for yourself.
Just create a list within a text block – put the years in bold, and then just assign a class to this text element.
The CSS will do the rest. You don’t even have to set any HTML code.

CSS on the page: https://webers-testseite.de/joeconnert/

PS: i see you. got some links on the text- see that it works even then on my testpage above if the whole text is the link ( as on your about page).

We can overcome this by setting the entire text on the right in italics using the “I” key, and then highlighting the individual word that should carry the link.

See the setting on the example page below the css code – (without that custom-class: my-linstings)
This may sound complicated, but it avoids having to set all “tables” as HTML. Use only the text block element. Also, take a look at the responsive behavior.

you are not using the list element :

on code view of the text-block it looks this way on my text page:

you have all p tags ( by line-break ) .

you know how get a unordered list?

just enter your text – make all years (the wohle years-block f.e. 2007 – 2009) bold.
Then highlight the wohle text and klick “bulleted List”

ok – du hast jetzt statt bold das mit der Farbe realisiert, das die Jahre in einen eigenen tag kommen. Das wäre so nicht nötig gewesen.
Denn die Farbe hättest du dann generell über dieses den strong-tag setzen können; so wie ich es auf der Beispielseite tat. Den bold style hatte ich dann ja mittels css zurückgenommen.

damit meine Setzungen greifen, könntest Du jetzt eben das über dein span-tag machen:

#top .my-listings li {
  display: grid;
  gap: 0 20px;
  grid-auto-flow: row;
  grid-template-columns: 120px 1fr;
  justify-content: start;
  margin: 0;
  margin-bottom: 10px;
}

#top .my-listings li span {
  font-weight: normal;
  justify-self: end;
}

#top .my-listings li em {
  font-style: normal;
}

/* === responsive styling === */
@media only screen and (max-width: 469px) {
  #top .my-listings li {
    grid-template-columns: 1fr;
    justify-content: center;
    margin-left: 0 ;
  }

  #top .my-listings li span {
    font-weight: normal;
    justify-self: start;
  }
}

Das mit dem Kursiv setzen für den rechten Text brauchst du nur wenn du einzelne Begriffe dort verlinken möchtest. Wenn du immer den kompletten rechten Teil verlinkst, wie es in einem Beispiel auf deiner Seite war ist dies noch nicht mal nötig, da dann der ganze linke Teil in einem a-tag steht.

Diese Einstellung hier bestimmt wo die Jahre bündig sind:

#top .my-listings li span {
  font-weight: normal;
  justify-self: end;
}

wenn du z.B die lieber linksbündig hast, dann stelle justify-self : start
(ps kopiere und ersetze die my-listings Regeln komplett, da ich noch das margin-left der enfold Standard Einstellung damit überschrieb. Der #top selektor garantiert hier noch das ich keine unnötigen !important Regeln setzen muss um bestehende Regeln von Enfold zu überschreiben.

bei deiner Schriftgröße würden für den linken Teil der Jahre auch 90px reichen:
grid-template-columns: 90px 1fr;

wenn du die Jahre jetzt auf einen Schlag verändern willst, dann könntest du jetzt setzen ( bold und andere font farbe)

#top .my-listings li span {
  font-weight: bold;
  justify-self: start;
  color: #3f9681 !important;
}

(ps hier ist das !important nötig, da du einen inline-style gesetzt hattest – mit dem Einfärben im Textfeld)

wenn du der ganzen Liste ( also dem ul tag ) nur noch eigenschaften geben möchtest :

#top .my-listings {
  padding: 5px;
  background-color: #f8f8f8;
  border: 1px solid #3f9681; 
  border-width: 1px 0px 0px 1px !important; /* unterschiedliche Border Weiten für : Oben, Rechts, Unten, Links */
}

Resultat wäre dann:

wenn dir der Abstand der Zeilen ( der li elemente ) zu groß ist, dann ändere diesen Wert bei den
#top .my-listings li auf z.B. 5px

du siehtst, über diese custom class my-listings – ist dann alles geregelt. Sobald du eine Liste einsetzt, und den text-block mit der Klasse versiehst, wird die darin enthaltene Liste so dargestellt.

_____________

Responsiv ( für Mobile screenweiten im Hochkant Format)

du kannst es auch so lassen. Da mit dem bold klick ist halt schneller als eine Farbe für das Jahr dann auszuwählen. Ebenso wenn du nur einzelne Worte im Text rechts als Link haben möchtest ist es leichter das kanze auf kursiv zu klicken und dann den Teil des Satzes verlinken. Das mit dem Kursiv setzen ist aber nur nötig wenn du eine kleinere Auswahl vom Text rechts mit einem Link versehen willst.