Вертикальное выравнивание элементов сетки MaterialUI, которые существуют в разных контейнерах сетки

Question

Мне нужно выполнить дизайн, который требует трех вертикальных столбцов.Первый и последний столбцы содержат карты MaterialUI, а средний столбец содержит вертикальную линию с точками, которые выровнены по вертикали с началом каждой из карт.Высота самих карт не фиксирована.Я приложил уменьшенный скриншот дизайна.

Вот мой макет:

<Grid container>
    <Grid item xs={5}>
        <Grid container direction={"column"}>
            cards...
        </Grid>
    </Grid>
    <Grid item xs={2}>
        vertical line...
    </Grid>
    <Grid item xs={5}>
        <Grid container direction={"column"}>
            cards...
        </Grid>
    </Grid>
</Grid>

Мне нужно иметь возможность выравнивать по вертикали карты и вертикальную разделительную линию (с точками), как показано на скриншоте.Однако очень непонятно, как можно рендерить элементы, которые существуют в разных Grid контейнерах.

Скриншот дизайна:

Answer 1

maybe work...


// Add your dot icon in ::before in css file
<style>
  leftColumns::before {
    display: ' ';
    position:absolute;
    background: '...';
    top: 0;
    left: 0;
  }
  leftColumns {
  position:relative;
  }
  /* Repeat for RightColumns */
  
  
</style>
<Grid container>
    <Grid item xs={6} style={{borderLeft: '1px solid #ccc'>
        <Grid container direction={"column"}>
        // for each item
           <div className="leftColumns" style={{padding: '0 10px'}}>
              <Card />
           </div>
  
  
    enter code here
        </Grid>
    </Grid>
    <Grid item xs={6} style={{borderRight: '1px solid #ccc'>
        <Grid container direction={"column"}>
           // for each item - Like LeftColumns
           <div className="RightColumns" style={{padding: '0 10px'}}>
              <Card />
           </div>
        </Grid>
    </Grid>
</Grid>