Hi all !

I need to beautify this VF page so that the 'Nombre de Pago' output field is above the 'Importe' field but in the same line, not like now see? I need the fields to be nicely aligned and I'm not being able to do so. I've added some <br></br> tags but still ugly:



When the user clicks the Add Row button a new record row is added but not aligned with the rest of the lines.

Any idea how to fix it ?

Here's the VF page code:
 

<apex:page standardController="Cuadre__c" extensions="insertParentChildCon" lightningStylesheets="true" showHeader="false" sidebar="false">
    
    <apex:form >
        <apex:pageBlock >
            <apex:pageBlockButtons >
                <apex:commandButton action="{!QuikSave}" value="Quik Save"/>
                <apex:commandButton action="{!Save}" value="Save"/>
                <apex:commandButton action="{!Cancel}" value="Cancel"/>                
            </apex:pageBlockButtons>
            <apex:pageBlockSection title="Cuadre">
                <apex:outputField value="{!Cuadre__c.Name}"/>
                <apex:outputField value="{!Cuadre__c.PendienteCobro__c}"/>
            </apex:pageBlockSection>
            <apex:pageBlockSection title="Agregar pagos al cuadre">                   
                <apex:repeat value="{!pagoList}" var="pg" id="table">
                    <br></br>
                    <br></br>                    
                    <apex:inputField value="{!pg.Name}"/>                    
                    <apex:inputField value="{!pg.Tipo__c}"/>
                    <apex:inputField value="{!pg.Importe__c}"/>
                    <apex:inputField value="{!pg.FormaPago__c}"/>
                    <br></br>
                    <br></br>
                    <br></br>
                </apex:repeat>                
            </apex:pageBlockSection>
            <apex:commandButton value="Add Row" Action="{!AddRow}" immediate="true" id="button"/> 
            
        </apex:pageBlock>
    </apex:form>

</apex:page>