Vertical split

vertical split docid\ vtoi7mkpjhkcqcc4xoaty blocks arrange content into two side by side columns they are useful for comparisons, layouts with supporting information, or presenting code alongside explanations syntax you can add this component using either markdown or mdx \ verticalsplit{layout="middle"} \ verticalsplititem left content \ \ verticalsplititem right content \ \ \<verticalsplit layout="middle"> \<verticalsplititem> left content \</verticalsplititem> \<verticalsplititem> right content \</verticalsplititem> \</verticalsplit> vertical split blocks support three layout options left , creates a wider left column middle , creates two equally sized columns right , creates a wider right column each layout requires exactly two verticalsplititem blocks mdx example the following examples demonstrate the three available layout options equal columns ( middle ) \<verticalsplit layout="middle"> \<verticalsplititem> \### left column this column takes up equal space with the right column \</verticalsplititem> \<verticalsplititem> \### right column perfect for comparing features, showing before/after, or code + explanation \</verticalsplititem> \</verticalsplit> left heavy layout ( left ) \<verticalsplit layout="left"> \<verticalsplititem> \### main content the left column is wider — use this when the left side has the primary content and the right side has supplementary info \</verticalsplititem> \<verticalsplititem> \<hint type="info"> this sidebar provides extra context \</hint> \</verticalsplititem> \</verticalsplit> right heavy layout ( right ) \<verticalsplit layout="right"> \<verticalsplititem> quick links \ \[tabs]\(/tabs) \ \[tables]\(/tables) \</verticalsplititem> \<verticalsplititem> \### detailed explanation the right column is wider — use this when the right side has the primary content \</verticalsplititem> \</verticalsplit>