html - 如何对齐 panelGrid 中的 outputText

Question

我定义了以下对话框:

        <p:dialog id="dialog" header="Request Detail"
            widgetVar="requestDialog" resizable="false" showEffect="fade"
            hideEffect="fade" >
            <h:panelGrid id="display" columns="2" border="1" cellpadding="4" columnsclasses="width:200px;width:450px;"              
                style="vertical-align:top" >
                
                <!-- SNIP -->

                <h:outputText value="Status Notes:" styleClass="newCourier" />
                <h:outputText value="#{uploadStatus.selectedRequest.statusNotes}" styleClass="newCourier" 
                    escape="false" />

            </h:panelGrid>
        </p:dialog>

如何让 Status Notes 对齐/显示在它的网格顶部？

我已经尝试将 style="float:top" 添加到它的 h:outputText 标签中，以及一些其他的东西。

如果重要，这里是 .newCourier 的定义:

.newCourier {
   font-family: courier new;
}

我很感激任何帮助。谢谢。

编辑:
基本上，我有一个包含 2 列的 1 行表(我有其他行，但我只关心这一行)。第一列只是“状态说明”。第二列的长度可变，但可能会很大。现在，“状态说明”在其列框中居中，但我希望它在列框的顶部垂直对齐。

编辑 2:
What I'm trying to achieve...

Answer 1

代替标准h:panelGrid , 使用 Primefaces Panelgrid ( <p:panelGrid)

<p:panelGrid id="display" columns="2" border="1" cellpadding="4" columnsclasses="width:200px;width:450px;">

               <p:outputPanel style="float: left">     
               <f:facet name="header">  
                Status Note:  #{uploadStatus.selectedRequest.statusNotes}
                </f:facet>
                </p:outputPanel>



            </p:panelGrid>

更新:

删除注释行 <!-- SNIP -->