In using primeng grid, a common desire is to have 2 columns behave a certain way:
- the first column should take up 1/13 of the total space
- the second column should take up the remaining space.
Many attempt different solutions like:
<div class="p-grid p-nogutter">
<div class="p-col-1">
toto
</div>
<h1 class="p-col-11">titi</h1>
</div>
However, achieving a smaller size for the 'toto' div seems to be a challenge.
The ultimate goal is to replicate a layout like this using p-grid: https://i.sstatic.net/vb1bl.png
Other attempts have been made:
Here's an example of an attempt:
<div class="p-d-inline-flex p-ai-center">
<button appBackButton pButton pRipple type="button" icon="pi pi-arrow-left" class="p-button-rounded p-col-1 p-mr-4"></button>
<div class="p-flex">
<h1>titi</h1>
<span>blablablabla</span>
</div>
</div>
The result can be seen here: https://i.sstatic.net/oFMWt.png
As you can see, the button is not aligned with 'titi', but with the entire second column which is not the intended result.