Border of multiple details tags in one html row are not working responsive [closed]

I have a proble on my website: . I have several accordion menus which I made with pure css without any javascript and everything works perfect, except for one problem:

When I click on the categories to expand the tag, all other boxes which are collapsed with the detail tag which are on the same row will expand their border from the .div. Is there any way to fix this problem without using javascript? I tried to only draw the border if the details tag is open, however then I run into the problem that the border is smaller than the .div because it will be only assigned to the details tag. The best way would be to be able to select the parent element from the details[open] tag. However after doing some research that is not possible with css3 only. Anyone has ideas how to fix this problem? On mobile it works perfectly fine because only one row is displayed….

Here is an image of the problem: CSS Problem