I'am very new to salesforce Lightning design system(slds). I have used slds-grid in my Lighthing componnet.
I need to achieve image in following format:
But actually its appearing like this:
I added on <br/> tag.So now its appearing like below image
Question: 1.How Can I avoid break tag here
2.How to Achieve image in following format
<div class="slds-grid slds-gutters">
<div class="slds-col">
<span>
<ui:inputSelect aura:id="Lob" value="{!v.displayComparison.LOB__c}" label="LOB" >
<aura:iteration items="{!v.LOB}" var="item">
<ui:inputSelectOption label="{!item.label}" text="{!item.value}" value="{!v.displayComparison.LOB__c==item.label}" />
</aura:iteration>
</ui:inputSelect>
</span>
</div>
<div class="slds-col">
<span>
<ui:inputSelect aura:id="BuisnessType" value="{!v.displayComparison.Business_Type__c}" label="Buisness Type" >
<aura:iteration items="{!v.BusinessType}" var="item">
<ui:inputSelectOption label="{!item.label}" text="{!item.value}" value="{!v.displayComparison.Business_Type__c==item.value}" />
</aura:iteration>
</ui:inputSelect>
</span>
</div>
</div>
<br/> <!-- Break tag added here -->
<!--presnted premium and sold -->
<div class="slds-grid slds-gutters">
<div class="slds-col">
<span>
<ui:inputText class="PresentedPremium" aura:id="PresentedPremium" label="Presented Premium" value="{!v.displayComparison.Presented_Premium__c}" />
</span>
</div>
<div class="slds-col">
<span>
<ui:inputText class="SoldPremium" aura:id="SoldPremium" label=" Sold Premium" value="{!v.displayComparison.Sold_Premium__c}" />
</span>
</div>
</div>