title: How to align button horizontally in primefaces column?
body: <p>I am having a layout problem in one of my primefaces UI.
  I basically have a table wrapped in a DIV with the code below.  The last column should contain buttons that I wanted to arrange horizontally
  so I enclosed them in a panelGroup</p>
  
  <pre><code>&lt;div style="overflow: auto; height: 300px;"&gt;
      &lt;p:dataTable &gt;
          &lt;p:column headerText="Column 1"&gt;
          &lt;/p:column&gt;
          .
          .
          &lt;p:column headerText="Actions"&gt;
              &lt;h:panelGroup layout="span"&gt;
                  &lt;p:commandButton value="Edit" icon="ui-icon-scissors" /&gt;
                  &lt;p:commandButton value="Delete" icon="ui-icon-trash" /&gt;
              &lt;/h:panelGroup&gt;
          &lt;/p:column&gt;
      &lt;/p:dataTable&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>However, when they are rendered the buttons are arrange vertically.  Viewing the HTML code I notice that the buttons are both wrapped in a div
  so thats why there is a newline between them.</p>
  
  <p>How to fix this problem?</p>
  
  <p>Thanks</p>