CSS Grid 2 columns to flex

I currently have this HTML table element :

It needs to get responsive with the following requisites :

1. Two columns max, as shown in the image
2. First column should have the size of the largest text possible in 1st column ( here : "Date d'ouverture du ticket" but could change in another page )
3. 2nd column should get all the remaining space in the row
4. When the size of the viewport decreases, if there is not enough space in col 2 to fit the text ( ideally but could be set to a fixed pixel value ), get flexy and send all 2nd columns under their respective 1st column
5. Ideally, no media queries should be used

The final code can use either table elements ( as per today ), or nested divs/span elements.

I've tried to play a bit with CSS grid but cannot seem to find the perfect formula.

Thx in advance for your ideas.