1<Flex style={{ gap: "24px", flexWrap: "wrap" }}>
2  <SidePanel side="right">
3    <SidePanel.Header
4      title="Right Side Panel"
5      icon={<Avatar fallback="A" />}
6      description="This is a description."
7      actions={[<Button>Action</Button>]}
8    />
9    <SidePanel.Section>
10      <List.Root>
11        <List.Header>User Information</List.Header>
12        <List.Item align="center">
13          <List.Label minWidth="88px">Status</List.Label>
14          <List.Value>Active</List.Value>
15        </List.Item>
16        <List.Item align="center">
17          <List.Label minWidth="88px">Type</List.Label>
18          <List.Value>Premium Account</List.Value>
19        </List.Item>
20        <List.Item align="center">
21          <List.Label minWidth="88px">Created</List.Label>
22          <List.Value>April 24, 2024</List.Value>
23        </List.Item>
24      </List.Root>
25    </SidePanel.Section>
26    <SidePanel.Section>

1<SidePanel side="right">
2  <SidePanel.Header title="Right Side Panel" />
3  <SidePanel.Section>
4    <List.Root>
5      <List.Header>User Information</List.Header>
6      <List.Item align="center">
7        <List.Label minWidth="88px">Status</List.Label>
8        <List.Value>Active</List.Value>
9      </List.Item>
10    </List.Root>
11  </SidePanel.Section>
12</SidePanel>