While you may prefer to utilize display: grid properties, I haven't been able to achieve the desired result using those properties. Instead, I propose an alternative approach by employing display:flex.
In the demonstration below, I utilized Bootstrap's accordion feature.
1) To align direct children elements (blocks/divs) next to each other, apply some display:flex to a container.
2) Create 2 child blocks within that container to establish 2 columns. You can use bootstrap's col-6 class for each block, setting its width to 50%.
3) Within these 2 columns, insert your accordions while ensuring they function independently without affecting neighboring elements in the opposite column.
This is how it appears visually:
https://i.sstatic.net/lrGaq.png
If you're interested, here's a code snippet utilizing Bootstrap 5.1.3 :
<html lang="en">
<head>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f3919c9c878087819283b3c6ddc2ddc0">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="./styles.css">
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<div class="d-flex">
<div class="col-6">
<div class="accordion" id="accordion-1">
<div class="accordion-item">
// Accordion content goes here
</div>
</div>
</div>
<div class="col-6">
// Second set of accordion items go here
</div>
</div>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ed8f8282999e999f8c9dadd8c3dcc3de">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
-- UPDATE --
I've devised another method that leverages display:flex, but incorporates more structural adjustments to uphold responsive design standards as per your specifications:
on mobile / tablet: Implement a horizontal layout with two elements side by side. Accordions won't impact the height of adjacent elements when expanded.
on desktop / large screens: Utilize a vertical layout instead
Below is a code excerpt, feel free to test the responsiveness to witness the structural adaptations.
<html lang="en">
<head>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="40222f2f34333432213000756e716e73">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="./styles.css">
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<div class="col-12 col-lg-4">
<div class="row">
<div class="col-6 col-lg-12">
<div class="accordion" id="accordion-1">
// First set of accordion items inside this div
</div>
</div>
<div class="col-6 col-lg-12">
// Insert second set of accordion items here
</div>
</div>
</div>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="92f0fdfde6e1e6e0f3e2d2a7bca3bca1">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>