side task labels

I need to make this kind of label at the side of my text outside of main area of the page, it needs to be aligned with that text.

at first i have done that with a grid (at left bar was that label and in the middle area of the grid i was using flex box for a responsive design)

but now I have a problem:
I need to make two of these texts next to each other with that label. Under each text there is a content that have to be under that text.

I tried to just split my grid to multiple areas but it was just causing more problems when I wanted to make it responsive . . .

I also tried to create it with a pseudo elements, but my lack of understanding of css would not let me finish it (although i could move it with position: relative, it would leave its hitboxes at its original position and it can't offset text from where it is really positioned.)

can some pro help me with this and tell me how to solve it?
thanks a lot
Screenshot_2023-07-14-07-58-26-41_e2d5b3f32b79de1d45acd1fad96fbb0f.jpg
Screenshot_2023-07-14-07-57-11-39_e2d5b3f32b79de1d45acd1fad96fbb0f.jpg
Was this page helpful?