How do you place content side by side?

[MartinGC94]

Using this as a reference:

I want the text moved up on the right side of the labels for the pie chart. This is the code that I feel like should do it:

$TestData = ls $PSHOME
$GroupedData = $TestData | Group-Object -Property Extension -NoElement
New-HTML -HtmlData {
    New-HTMLSection -Direction column -HeaderTextAlignment left -CanCollapse -HeaderText FileData -Content {
        New-HTMLSection -Direction row -Content {
            New-HTMLChart -Width 350 -Title FileExtensions -ChartSettings {
                foreach ($Group in $GroupedData)
                {
                    New-ChartPie -Name $Group.Name -Value $Group.Count
                }
            }
            New-HTMLTextBox  -TextBlock {
                New-HTMLText -Text "This is the first example of some demotext I want"
                New-HTMLText -Text "This is the second example of some demotext I want"
                New-HTMLText -Text "This is the third example of some demotext I want"
                New-HTMLText -Text "This is the forth example of some demotext I want"
                New-HTMLText -Text "This is the fifth example of some demotext I want"
            }
        }
        New-HTMLTable -DataTable $TestData
    }
} -ShowHTML

My understanding of the Direction parameter for New-HTMLSection is that column should add elements from top to bottom and row adds elements left to right, but clearly there's something I'm misunderstanding.
I've tried wrapping the different elements in columns, panels, etc. and modifying the width and alignment properties but nothing I've done has worked for me.

Bonus question: Is there a way to modify the text for the pie chart labels? It would be nice if there was the raw number for each file extension so you didn't have to mouse over the chart to get the numbers.

[PrzemyslawKlys]

$TestData = Get-ChildItem $PSHOME
$GroupedData = $TestData | Group-Object -Property Extension -NoElement
New-HTML -HtmlData {
    New-HTMLSection -Direction column -HeaderTextAlignment left -CanCollapse -HeaderText FileData -Content {
        New-HTMLSection -Content {
            New-HTMLChart -Width 350 -Title FileExtensions -ChartSettings {
                foreach ($Group in $GroupedData) {
                    New-ChartPie -Name $Group.Name -Value $Group.Count
                }
            }
            New-HTMLTextBox -TextBlock {
                New-HTMLText -Text "This is the first example of some demotext I want"
                New-HTMLText -Text "This is the second example of some demotext I want"
                New-HTMLText -Text "This is the third example of some demotext I want"
                New-HTMLText -Text "This is the forth example of some demotext I want"
                New-HTMLText -Text "This is the fifth example of some demotext I want"
            }
        }
        New-HTMLTable -DataTable $TestData
    }
} -ShowHTML

I have just removed Direction from the 2nd section.

$TestData = Get-ChildItem $PSHOME
$GroupedData = $TestData | Group-Object -Property Extension -NoElement
New-HTML -HtmlData {
    New-HTMLSection -HeaderTextAlignment left -CanCollapse -HeaderText FileData -Content {
        New-HTMLSection -Content {
            New-HTMLChart -Width 350 -Title FileExtensions -ChartSettings {
                foreach ($Group in $GroupedData) {
                    New-ChartPie -Name $Group.Name -Value $Group.Count
                }
            }
            New-HTMLTextBox -TextBlock {
                New-HTMLText -Text "This is the first example of some demotext I want"
                New-HTMLText -Text "This is the second example of some demotext I want"
                New-HTMLText -Text "This is the third example of some demotext I want"
                New-HTMLText -Text "This is the forth example of some demotext I want"
                New-HTMLText -Text "This is the fifth example of some demotext I want"
            }
        }
    }
    New-HTMLTable -DataTable $TestData
} -ShowHTML

But to be honest I think you're overcomplicating it. By default the sections go from top to bottom. When you nest any sections they will go from left to right.

So what I would usually do:

$TestData = Get-ChildItem $PSHOME
$GroupedData = $TestData | Group-Object -Property Extension -NoElement
New-HTML -HtmlData {
    New-HTMLSection -HeaderTextAlignment left -CanCollapse -HeaderText FileData -Content {
        New-HTMLSection -Content {
            New-HTMLChart -Width 350 -Title FileExtensions -ChartSettings {
                foreach ($Group in $GroupedData) {
                    New-ChartPie -Name $Group.Name -Value $Group.Count
                }
            }
        }
        New-HTMLSection -Content {
            New-HTMLTextBox -TextBlock {
                New-HTMLText -Text "This is the first example of some demotext I want"
                New-HTMLText -Text "This is the second example of some demotext I want"
                New-HTMLText -Text "This is the third example of some demotext I want"
                New-HTMLText -Text "This is the forth example of some demotext I want"
                New-HTMLText -Text "This is the fifth example of some demotext I want"
            }
        }
    }
    New-HTMLSection -HeaderText 'next' {
        New-HTMLTable -DataTable $TestData
    }
} -ShowHTML

And then I would usually add Invisible switch

$TestData = Get-ChildItem $PSHOME
$GroupedData = $TestData | Group-Object -Property Extension -NoElement
New-HTML -HtmlData {
    New-HTMLSection -HeaderTextAlignment left -CanCollapse -HeaderText FileData -Content {
        New-HTMLSection -Content {
            New-HTMLChart -Width 350 -Title FileExtensions -ChartSettings {
                foreach ($Group in $GroupedData) {
                    New-ChartPie -Name $Group.Name -Value $Group.Count
                }
            }
        } -Invisible
        New-HTMLSection -Content {
            New-HTMLTextBox -TextBlock {
                New-HTMLText -Text "This is the first example of some demotext I want"
                New-HTMLText -Text "This is the second example of some demotext I want"
                New-HTMLText -Text "This is the third example of some demotext I want"
                New-HTMLText -Text "This is the forth example of some demotext I want"
                New-HTMLText -Text "This is the fifth example of some demotext I want"
            }
        } -Invisible
    }
    New-HTMLSection -HeaderText 'next' {
        New-HTMLTable -DataTable $TestData
    } -Invisible
} -ShowHTML

[MartinGC94]

It's closer to what I want but it's not quite there. I want the text closer to the diagram. If I use the browser dev tools I can see that each div takes up half the window, is there a way to make it take up just the amount of space needed by the diagram? I've tried adjusting the width parameter for the section but it doesn't seem to do anything. I can adjust the flex-basis percentage in the dev tools to almost get the result I want (it doesn't handle browser resizing that well).

[PrzemyslawKlys]

$TestData = Get-ChildItem $PSHOME
$GroupedData = $TestData | Group-Object -Property Extension -NoElement
New-HTML -HtmlData {
    New-HTMLSection -HeaderTextAlignment left -CanCollapse -HeaderText FileData -Content {
        New-HTMLSection -Content {
            New-HTMLChart -Width 350 -Title FileExtensions -ChartSettings {
                foreach ($Group in $GroupedData) {
                    New-ChartPie -Name $Group.Name -Value $Group.Count
                }
            }
        } -Invisible -Width '30%'
        New-HTMLSection -Content {
            New-HTMLTextBox -TextBlock {
                New-HTMLText -Text "This is the first example of some demotext I want"
                New-HTMLText -Text "This is the second example of some demotext I want"
                New-HTMLText -Text "This is the third example of some demotext I want"
                New-HTMLText -Text "This is the forth example of some demotext I want"
                New-HTMLText -Text "This is the fifth example of some demotext I want"
            }
        } -Invisible
    }
    New-HTMLSection -HeaderText 'next' {
        New-HTMLTable -DataTable $TestData
    } -Invisible
} -ShowHTML

You can use width 30% and it works fine. By default it's doing always 50/50. You can add more sections making it 33/33/33 and if you add 4 it will do 25/25/25/25. You could just create empty sections and it should work as well, or use width.

[MartinGC94]

Ahhh, it was the percentage sign I was missing. I tried with Width 350 like I did with the chart and saw no difference.
Thanks for the help, it looks great now.