Hi,

I have a form with fields displaying and creating computer record in salesforce. The form is called in the Community. I need help with Styling/ UI.

Right now my UI is as below:
 But i need to move the Name, Brand, Account text labels beside the fields like below:


My code is as below:

<aura:component implements="forceCommunity:availableForAllPageTypes,force:hasRecordId" access="global" controller="ComputerController">
    <aura:attribute name="fields" type="String[]" default="['Name','Carrier_Account__c','Brand__c']" />
    <aura:attribute name="recordId" type="String"/>
    <aura:attribute name="AccId" type="String"/>
    <aura:attribute name="strBrand" type="String"/>
    <aura:attribute name="strName" type="String"/>
    <aura:attribute name="strPrice" type="String"/>
    <aura:attribute name="showSuccess" type="boolean"/>
    <aura:attribute name="showError" type="boolean"/>
    <aura:attribute name="showPrice" type="Boolean" default="false"/>
    <lightning:navigation aura:id="navigation"/>
    <!--lightning:notificationsLibrary aura:id="notifLib"/>
    
    <lightning:recordForm objectApiName="Computer__c" fields="{!v.fields}" onsuccess="{!c.handleSuccess}">
       
        
    </lightning:recordForm-->
    <lightning:recordEditForm objectApiName="Computer__c"  >
        <div class="slds-grid">
            <div class="slds-col slds-size_4-of-5">
                <div class="slds-grid slds-p-around_medium">
                    <div class="slds-col slds-size_1-of-5">
                        <span>
                            <div>Name: </div>
                            
                        </span>
                    </div>
                    <div class="slds-col slds-size_4-of-5">
                        <span>
                            <lightning:inputField fieldName="Name" value = "{!v.strName}" onchange="{!c.onChangeVal}" variant="label-hidden"/>
                        </span>
                    </div>
                </div>
                <div class="slds-grid slds-p-around_medium">
                    <div class="slds-col slds-size_1-of-5">
                        <span>
                            <div>Brand: </div>
                            
                        </span>
                    </div>
                    <div class="slds-col slds-size_4-of-5">
                        <span>
                            <lightning:inputField fieldName="Brand__c" value = "{!v.strBrand}" onchange="{!c.onChangeVal}"  variant="label-hidden"/>
                        </span>
                    </div>
                </div>
                <div class="slds-grid slds-p-around_medium">
                    <div class="slds-col slds-size_1-of-5">
                        <span>
                            <div>Account: </div>
                            
                        </span>
                    </div>
                    <div class="slds-col slds-size_4-of-5">
                        <span>
                            <lightning:inputField fieldName="Carrier_Account__c"  onchange="{!c.handleChange}" value = "{!v.AccId}" aura:id="field1" variant="label-hidden"/>
                        </span>
                    </div>
                </div>
                <aura:if isTrue="{!v.showPrice}">
                    <div class="slds-grid slds-p-around_medium">
                        <div class="slds-col slds-size_1-of-5">
                            <span>
                                <div>Price: </div>
                                
                            </span>
                        </div>
                        <div class="slds-col slds-size_4-of-5">
                            <span>
                                <lightning:inputField fieldName="Price__c" value = "{!v.strPrice}" variant="label-hidden"/>
                            </span>
                        </div>
                    </div>
                </aura:if>
            </div>
            <div class="slds-col slds-size_1-of-3">
                <span></span>
            </div>
        </div>
        
        
    </lightning:recordEditForm>
    <br/>
    <div class="slds-align_absolute-center">
        <aura:if isTrue="{!v.showSuccess}">
            <div class="slds-text-color_success">Record saved successfully</div>
        </aura:if>
        <aura:if isTrue="{!v.showError}">
            <div class="slds-text-color_success">Some error occured, Please try later</div>
        </aura:if>
    </div>
  <!--  <div class="slds-grid "> -->
        <div class="slds-col slds-size_2-of-3">
            <div class= "slds-align_absolute-center"> 
                <lightning:button variant="Destructive" label="Save" title="Primary action" onclick="{!c.handleSave}" class="widebutton"/>
            </div>
            
        </div>
        <div class="slds-col slds-size_1-of-3">
             <span></span>
        </div>
    <!--</div> -->
    
</aura:component>


Any help is appreciated.