How to display a form of data in 2 columns(2-column layout) using lightning component of Salesforce

Apex Class : AccountController

public class AccountController {
    @AuraEnabled
    public static Account saveAccount(Account accountObj) {
        insert accountObj;
        system.debug('AccountAccount'+accountObj);
        return accountObj;
    }
}
Lightning Application : AccountApp.app

<aura:application >
    <ltng:require styles="{!$Resource.SLDS100 +
         '/assets/styles/salesforce-lightning-design-system-ltng.css'}"/>
    <div class="slds">
         <c:AccountCreation />
    </div>
</aura:application>
Note:Replace static resource url with the url of lightning resources zip file which you download.
Lightning Component :AccountCreation.cmp
<aura:component implements="force:appHostable,forceCommunity:availableForAllPageTypes,flexipage:availableForAllPageTypes" controller="AccountController">
     <aura:attribute name="newAccount" type="Account"
                    default="{ 'sobjectType': 'Account'                            
                             }"/>
    <!-- PAGE HEADER -->
    <div class="slds-page-header" role="banner">
        <div class="slds-grid">
            <div class="slds-col">
                <p class="slds-text-heading--label">Account</p>
                <h1 class="slds-text-heading--medium">My Account</h1>
            </div>
        </div>
    </div>
    <!-- / PAGE HEADER -->
    <!-- NEW Account FORM -->
    <div class="slds-col slds-col--padded slds-p-top--large">
        <div aria-labelledby="Accountform">
            <!-- BOXED AREA -->
            <fieldset class="slds-box slds-theme--default slds-container--small">
                <legend id="Accountform" class="slds-text-heading--small
                                                       slds-p-vertical--medium">
                    Add Account
                </legend>
                <!-- CREATE NEW Account FORM -->
                <form class="slds-form--stacked">
                <div class="slds">
<div class="slds-grid slds-wrap">
<div class="slds-col--padded slds-size--1-of-1 slds-medium-size--1-of-2">

<div class="slds-form-element slds-is-required">
<div class="slds-form-element__control">
<ui:inputText aura:id="account Name" label="Account Name"
 class="slds-input"
 labelClass="slds-form-element__label"
 value="{!v.newAccount.Name}"
 />
</div>
                        </div>
                       
                        <div class="slds-form-element">
                          <div class="slds-form-element__control">
                              <ui:inputDate aura:id="accountSLADate" label="SLA Expiration Date"
                                  class="slds-input"
                                  labelClass="slds-form-element__label"
                                  value="{!v.newAccount.ksk__SLAExpirationDate__c}"
                                  displayDatePicker="true"/>
                          </div>
                      </div>


</div>
<div class="slds-col--padded slds-size--1-of-1 slds-medium-size--1-of-2">
<div class="slds-form-element__control">
<ui:inputText aura:id="expname" label="Site"
 class="slds-input"
 labelClass="slds-form-element__label"
 value="{!v.newAccount.ksk__Site}"
 />
</div>
<div class="slds-form-element__control">
<ui:inputText aura:id="expname" label="SIC Description"
 class="slds-input"
 labelClass="slds-form-element__label"
 value="{!v.newAccount.ksk__SicDesc}"
 />
</div>

<div class="slds-form-element__control">
<ui:inputText aura:id="accountSerialNumber" label="SLA Serial Number"
 class="slds-input"
 labelClass="slds-form-element__label"
 value="{!v.newAccount.ksk__SLASerialNumber__c}"
 />
</div>
</div>
</div>
</div>  
<div class="slds-form-element">
<ui:button label="Create Account"
  class="slds-button slds-button--brand"
  press="{!c.clickCreateAccount}"/>
</div>
            </form>
            <!-- / CREATE NEW Account FORM -->
            </fieldset>
            <!-- / BOXED AREA -->
        </div>
        <!-- / CREATE NEW Account -->
    </div>
    <!-- / NEW Account FORM -->
   
</aura:component>
Controller : AccountCreationController.js

({
    clickCreateAccount: function(component, event, helper) {
        var newAccount = component.get("v.newAccount");
        helper.createAccount(component, newAccount);
}
})

Helper : AccountCreationHelper.js
({
    createAccount: function(component, Account) {
    var action = component.get("c.saveAccount");
    action.setParams({
        "accountObj": Account
    });
    action.setCallback(this, function(response){
        var state = response.getState();
        if (component.isValid() && state === "SUCCESS") {
            var newAccount = component.get("v.newAccount");
            component.set("v.newAccount", newAccount);
        }
    });
    $A.enqueueAction(action);
}
})

Output :One we run the app,following form will be displayed.

Fill the form and then click "Create Account" button. Account will be created as shown in the image below.