Hi All,
i created the one lighnting component to display the opportunity records in search componet.but it not working properly.unable to arrange the fileds in component using slds. i am new to LEX. Can any one help to todo this.the alignments of fields are Account Name    Opportunity Name     Stage in the same horizantal line with text boxes also display the search results/records in another drop down  section in table format like
 Select   OppName   AccName   BilligngCountry  CloseDate   Stage   like this way.i will add my code for your reference

Apex Controller
public with sharing class searchAccountController {
 
 @AuraEnabled
 public static List <Opportunity> fetchOpportunities(String searchKeyWord) {
  String searchKey = searchKeyWord + '%';
  List < Opportunity > returnList = new List < Opportunity > ();
  List < Opportunity > lstOfOpp = [select id, Name, Account.Name,Account.BillingCountry, CloseDate,StageName from Opportunity
                                   where Name LIKE: searchKey LIMIT 1000];
 
  for (Opportunity opp: lstOfOpp) {
   returnList.add(opp);
  }
  return returnList;
 }
}
component .cmp
<!--<aura:component implements="force:hasRecordId,force:appHostable,flexipage:availableForRecordHome,forceCommunity:availableForAllPageTypes,forceCommunity:searchInterface" access="global"> 
    <aura:attribute name="objOpp" type="Opportunity" />
    <aura:attribute name="objAcc" type="Account" />
    
    <div class="slds-form slds-form_horizontal">
    <div class="slds-brand-band slds-brand-band_medium">
        <div class="slds-align_absolute-center slds-m-top_medium">
               
                   <div class="slds-form-element">
                    <label class="slds-form-element__label" for="input-id-01">Text Input</label>
                <div class="slds-form-element__control">
                      <input type="text" id="input-id-01" class="slds-input" />
                   </div>
                  </div>
            </div>
                                 
                
        
        </div>
    </div>
    
    
</aura:component>-->

<aura:component implements="force:hasRecordId,force:appHostable,flexipage:availableForRecordHome,forceCommunity:availableForAllPageTypes,forceCommunity:searchInterface" access="global" controller="searchAccountController">    
    <aura:attribute name="objOpp" type="Opportunity" />
    <aura:attribute name="objAcc" type="Account" />
    <aura:attribute name="searchResult" type="List" />
    <aura:attribute name="searchKeyword" type="String"/> 
    <aura:attribute name="Message" type="boolean" default="false"/>
    
    <div class="slds-m-around_medium">
       <!-- SEARCH INPUT AND SEARCH BUTTON--> 
        <lightning:layout>
            <div class="slds-align_absolute-center slds-m-top_medium">
             <lightning:button variant="neutral" label="Search" onclick="{!c.Search}" />
        
           </div>
            <div class="slds-grid slds-wrap slds-grid_pull-padded slds-m-top_large">
              <lightning:layoutItem size="3">
                <lightning:input value="{!v.searchKeyword}" label="Account Name" padding="around-medium"/>
                <lightning:input value="{!v.searchKeyword}" label="Opportunity Name" padding="around-medium"/>
                <lightning:input value="{!v.searchKeyword}" label="Stage" padding="around-medium"/>
                               
             </lightning:layoutItem>
            <!--<lightning:layoutItem size="2" padding="around-small">
                <lightning:button onclick="{!c.Search}" variant="brand" label="Search" iconName="utility:search"/>             
            </lightning:layoutItem>-->
            </div>
        </lightning:layout>
       
        
        <!-- ERROR MESSAGE IF NOT RECORDS FOUND--> 
        <aura:if isTrue="{!v.Message}">
            <div class="slds-notify_container slds-is-relative">
                <div class="slds-notify slds-notify_toast slds-theme_error" role="alert">
                    <div class="slds-notify__content">
                        <h2 class="slds-text-heading_small">No Records Found...</h2>
                    </div>
                </div>
            </div>
        </aura:if>
       
       <table class="slds-table slds-table_cell-buffer slds-table_bordered">
            <thead>
            <tr class="slds-line-height_reset">
              <!--<div class="slds-checkbox"> -->
            <th class="slds-checkbox" scope="col">
            <div class="slds-truncate" title="Select">Select</div>
             </th>
            <th class="slds-text-title_caps" scope="col">
            <div class="slds-truncate" title="Opportunity Name">Opportunity Name</div>
            </th>
            <th class="slds-text-title_caps" scope="col">
            <div class="slds-truncate" title="Account Name">Account Name</div>
            </th>
            <th class="slds-text-title_caps" scope="col">
            <div class="slds-truncate" title="Billing Country">Billing Country</div>
            </th>
            <th class="slds-text-title_caps" scope="col">
            <div class="slds-truncate" title="Close Date">Close Date</div>
            </th>
            <th class="slds-text-title_caps" scope="col">
            <div class="slds-truncate" title="Stage">Stage</div>
            </th>
            </tr>
            </thead>
            <tbody>
                
           </tbody>

            
        </table>
    </div>
</aura:component>
controller.js
 
({
    Search: function(component, event, helper) {
        var searchField = component.find('searchField');
        var isValueMissing = searchField.get('v.validity').valueMissing;
        // if value is missing show error message and focus on field
        if(isValueMissing) {
            searchField.showHelpMessageIfInvalid();
            searchField.focus();
        }else{
          // else call helper function 
            helper.SearchHelper(component, event);
        }
    },
})
helper.js


({
    SearchHelper: function(component, event) {
        // show spinner message
         component.find("Id_spinner").set("v.class" , 'slds-show');
        var action = component.get("c.fetchOpportunities");
        action.setParams({
            'searchKeyWord': component.get("v.searchKeyword")
        });
        action.setCallback(this, function(response) {
           // hide spinner when response coming from server 
            component.find("Id_spinner").set("v.class" , 'slds-hide');
            var state = response.getState();
            if (state === "SUCCESS") {
                var storeResponse = response.getReturnValue();
                
                // if storeResponse size is 0 ,display no record found message on screen.
                if (storeResponse.length == 0) {
                    component.set("v.Message", true);
                } else {
                    component.set("v.Message", false);
                }
                
                // set numberOfRecord attribute value with length of return value from server
                //component.set("v.TotalNumberOfRecord", storeResponse.length);
                
                // set searchResult list with return value from server.
                component.set("v.searchResult", storeResponse); 
                
            }else if (state === "INCOMPLETE") {
                alert('Response is Incompleted');
            }else if (state === "ERROR") {
                var errors = response.getError();
                if (errors) {
                    if (errors[0] && errors[0].message) {
                        alert("Error message: " + 
                                    errors[0].message);
                    }
                } else {
                    alert("Unknown error");
                }
            }
        });
        $A.enqueueAction(action);
    },
})
 
thanks in advance