How to create a output fields side by side in Salesforce vf page?

Hi,

Have a look to the following code for create a output fields side by side in Salesforce vf page:-

https://salesforce.stackexchange.com/questions/157996/arranging-fields-side-by-side-in-visualforce-page

<apex:panelGrid columns="3" style="table-layout: fixed" width="100%">
    <!-- column 1 -->
    <apex:pageBlockSection columns="1">
      <apex:outputField value="{!test.Name}" />
      <apex:outputField value="{!test.Cost__c}" />
      <apex:outputField value="{!test.Amount}" />
    </apex:pageBlockSection>
    <!-- column 2 -->
    <apex:panelGrid columns="1">
      <apex:outputLabel value="Address" />
      <apex:outputField value="{!Contact.MailingStreet}" />
      <apex:outputField value="{!Contact.MailingCity}" />
      <apex:outputField value="{!Contact.MailingState}" />
      <apex:outputField value="{!Contact.MailingPostalCode}" />
      <apex:outputField value="{!Contact.MailingCountry}" />
    </apex:panelGrid>
    <!-- column 3 -->
    <apex:map width="450px" height="200px" mapType="roadmap" zoomLevel="15"
                  center="{!Contact.MailingStreet},{!Contact.MailingCity},{!Contact.MailingState},{!Contact.MailingPostalCode},{!Contact.MailingCountry}">
    </apex:map>
</apex:panelGrid>