Grid with equal proportions from middle cell

I have a layout I’m trying to create that looks like the below:

I’m trying to set it up responsively so that:

  1. The divider line stays in the centre (which is currently working)
  2. There’s equal spacing between the middle divider and the two groups on the side

What happens currently is because the first group of content is slightly larger, as the screen size gets smaller it pushes the first group towards the divider line, while the second group doesn’t get pushed in with the same proportion, making it look like the below:

The way I’ve set it up currently is having a three column grid with a div for the divider line and nested grids for the first and third groups of content.

Appreciate any help!

Hey @Michael_Samy, can try using flexbox and set flex-basis to for each of 2 groups.