Question

I want to align elements as shown in the following image.

There are 2 columns. One aligned to left of the parent and another aligned to right.
I don’t want to specify anything in px or em. How do I achieve this in <h:panelGrid /> ?

Answer 1

Use CSS.

<h:panelGrid columns="2" columnClasses="column1,column2">
    ...
</h:panelGrid>

with

.column1 {
    width: 50%;
    text-align: left;
}

.column2 {
    width: 50%;
    text-align: right;
}

See also:

• CSS tutorial