How can i set specified width for embedded h:panelGroup - css

Question

The page has a h:panelGrid which contains two h:panelGroup expected to be displayed in the same line.
And additional requirement is that the left panelGroup should be 30% of the total width,the other 70%.
I have tried a couple of ways to make this happen but failed...
<h:form id="form">
<h:panelGrid id="pricePanel" columns="2" style="width:100%;" columnClasses="columnClazz" rowClasses="rowClazz">
<h:panelGroup>
<p:dataTable scrollHeight="250" id="priceData" var="item" value="#{accumByCustomerViewModel.quoteInfo}"
scrollable="true" rowIndexVar="rowInfo" rowKey="#{item.brand_code}" selection="#{accumByCustomerViewModel.selectedBrand}" selectionMode="single">
<p:ajax event="rowSelect" listener="#{accumByCustomerViewModel.onRowSelect}"
update=":form:custGrid"/>
<p:columnGroup id="columnGroup" type="header">
<p:row>
<p:column id="goldHeader" rendered="true" headerText="积存金" colspan="4"/>
</p:row>
<p:row>
<p:column id="brandHeader" rendered="true" headerText="品牌"/>
<p:column id="quoteDateHeader" rendered="true" headerText="报价日期"/>
<p:column id="salePriceHeader" rendered="true" headerText="卖出价"/>
<p:column id="redeemPriceHeader" rendered="true" headerText="赎回价"/>
</p:row>
</p:columnGroup>
<p:column id="brand_code" rendered="true">
#{item.brand_name}
</p:column>
<p:column id="quote_date" rendered="true">
#{item.quote_date}
</p:column>
<p:column id="salePrice" rendered="true">
#{item.entity_sale_price}
</p:column>.
<p:column id="redeemPrice" rendered="true">
#{item.entity_redeem_price}
</p:column>
</p:dataTable>
</h:panelGroup>
<h:panelGroup id="custGrid">
<p:fieldset legend="客户信息" id="custFieldset">
<h:panelGrid columns="2">
<h:outputText value="银行账号:"/>
<p:inputText value="#{accumByCustomerViewModel.custInfo.bank_acc}" style="color:red;font-weight:bold;"/>
<h:outputText value="证件类型: "/>
<h:outputText value="#{accumByCustomerViewModel.custInfo.cert_type}" style="color:red;font-weight:bold;"/>
<h:outputText value="证件号码: "/>
<h:outputText value="#{accumByCustomerViewModel.custInfo.cert_no}" style="color:red;font-weight:bold;"/>
</h:panelGrid>
</p:fieldset>
<p:fieldset legend="品牌" id="brandFieldset">
<h:panelGrid columns="2">
<h:outputText value="品牌名称:"/>
<h:outputText value="#{accumByCustomerViewModel.selectedBrand.brand_name}" style="color:red;font-weight:bold;"/>
<h:outputText value="金额: "/>
<p:inputText value="#{accumByCustomerViewModel.selectedBrand.entity_sale_price}" style="color:red;font-weight:bold;"/>
</h:panelGrid>
</p:fieldset>
</h:panelGroup>
</h:panelGrid>
</h:form>

Answer 1

Declare your <h:panelGroup> in <h:panelGrid>as
<h:panelGroup style="width: 30%;" layout="block">
<h:panelGroup style="width: 70%;" layout="block">
so they get rendered as <div>s, without it they are rendered as <span> and as such they do not keep their width. It worked for me.
In your case:
I used the following code:
<style>
.one{width: 70%; border: 1px solid red;}
.two{width: 30%; border: 1px solid red;}
</style>
<h:panelGrid id="pricePanel" columns="2" style="width:100%;" columnClasses="one, two">
<h:panelGroup layout="block">
<table style="width:100%;">
<tr>
<td>kuba</td>
<td>kuba</td>
<td>kuba</td>
<td>kuba</td>
<td>kuba</td>
<td>kuba</td>
</tr>
<tr>
<td>kuba</td>
<td>kuba</td>
<td>kuba</td>
<td>kuba</td>
<td>kuba</td>
<td>kuba</td>
</tr>
<tr>
<td>kuba</td>
<td>kuba</td>
<td>kuba</td>
<td>kuba</td>
<td>kuba</td>
<td>kuba</td>
</tr>
</table>
</h:panelGroup>
<h:panelGroup id="custGrid" layout="block">
<p:fieldset legend="客户信息" id="custFieldset">
<h:panelGrid columns="2">
<h:outputText value="银行账号:"/>
<p:inputText value="#{accumByCustomerViewModel.custInfo.bank_acc}" style="color:red;font-weight:bold;"/>
<h:outputText value="证件类型: "/>
<h:outputText value="#{accumByCustomerViewModel.custInfo.cert_type}" style="color:red;font-weight:bold;"/>
<h:outputText value="证件号码: "/>
<h:outputText value="#{accumByCustomerViewModel.custInfo.cert_no}" style="color:red;font-weight:bold;"/>
</h:panelGrid>
</p:fieldset>
<p:fieldset legend="品牌" id="brandFieldset">
<h:panelGrid columns="2">
<h:outputText value="品牌名称:"/>
<h:outputText value="#{accumByCustomerViewModel.selectedBrand.brand_name}" style="color:red;font-weight:bold;"/>
<h:outputText value="金额: "/>
<p:inputText value="#{accumByCustomerViewModel.selectedBrand.entity_sale_price}" style="color:red;font-weight:bold;"/>
</h:panelGrid>
</p:fieldset>
</h:panelGroup>
</h:panelGrid>
to get an output like that:
take a closer look at this part of code: columnClasses="one, two"

Answer 2

Use only panelGroups with following properties, working desired.
<h:panelGroup style="width: 100%; float: left;">
<h:panelGroup style="display: inline-table; width: 30%; float: left;">Leftside Content</h:panelGroup>
<h:panelGroup style="display: inline-table; width: 70%; float: left;">Rightside Content</h:panelGroup>
</h:panelGroup>