Splitter is utilized to separate and resize panels.
<div class="card">
<h5>Horizontal</h5>
<p:splitter style="height: 300px" styleClass="mb-5" widgetVar="splitter">
<p:splitterPanel styleClass="flex align-items-center justify-content-center">
Panel 1
</p:splitterPanel>
<p:splitterPanel styleClass="flex align-items-center justify-content-center">
Panel 2
</p:splitterPanel>
</p:splitter>
</div>
<div class="card">
<h5>Vertical</h5>
<p:splitter style="height: 300px" layout="vertical">
<p:splitterPanel styleClass="flex align-items-center justify-content-center">
Panel 1
</p:splitterPanel>
<p:splitterPanel styleClass="flex align-items-center justify-content-center">
Panel 2
</p:splitterPanel>
</p:splitter>
</div>
<div class="card">
<h5>Nested</h5>
<p:splitter style="height: 300px">
<p:splitterPanel styleClass="flex align-items-center justify-content-center" size="20" minSize="10">
Panel 1
</p:splitterPanel>
<p:splitterPanel size="80">
<p:splitter layout="vertical">
<p:splitterPanel styleClass="flex align-items-center justify-content-center" size="15">
Panel 2
</p:splitterPanel>
<p:splitterPanel size="85">
<p:splitter>
<p:splitterPanel styleClass="flex align-items-center justify-content-center" size="20">
Panel 3
</p:splitterPanel>
<p:splitterPanel styleClass="flex align-items-center justify-content-center" size="80">
Panel 4
</p:splitterPanel>
</p:splitter>
</p:splitterPanel>
</p:splitter>
</p:splitterPanel>
</p:splitter>
</div>