Lightning Design Multi-select Component on vf page

Question

I have a custom edit vf page with multiple sections. I'm trying to use the multi-select lightning design component on a pageblock section but the page alignment looks weird. The component looks good when I have it on a single page

Page Alignment:

VF Component:

<apex:component >
<apex:attribute name="xlink:href" type="String" description="TODO: Describe me"/>
<apex:attribute name="class" type="String" description="TODO: Describe me"/>
<apex:attribute name="aria-hidden" type="String" description="TODO: Describe me"/>
<apex:attribute name="styleClass" type="String" description="Class for svg tag" />
<apex:attribute name="path" type="String" description="Path for svg tag" />
<svg aria-hidden="true" class="{!styleClass}">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Resource.SLDS092, path)}" />
</svg>

VF Page:

 <apex:page standardController="sample__c">
 <apex:form >
 <apex:sectionHeader title="{!$ObjectType.Osample.label}" subtitle="{!sample__c.name}"/>
  <apex:pageBlock title="{!$ObjectType.sample.label} Detail">
    <apex:pageBlockButtons >
        <apex:commandButton action="{!save}" value="Save"/>
 <!---       <apex:commandButton action="{!saveAndNew}" value="Save & New"/>  --->
        <apex:commandButton action="{!cancel}" value="cancel"/> 
      <font color="#ff0000"><strike>
       </strike></font> 
       </apex:pageBlockButtons>
    <apex:pageBlockSection showHeader="false" columns="2">
        <apex:inputField value="{!sample__c.Name}" required="true"/>

       </apex:pageBlockSection>
    <apex:pageBlockSection showHeader="true" title="Sample Information" columns="2">
     <apex:inputField value="{!sample__c.first__c}"/>
     <apex:inputField value="{!sample__c.Second__c}"/>
     </apex:pageBlockSection>
    <apex:outputPanel styleClass="slds">
    <apex:pageBlockSection showHeader="true" title="Add Multi-select"  >
    <apex:stylesheet value="{!URLFOR($Resource.SLDS092, 'assets/styles/salesforce-lightning-design-system-vf.css')}" />
    <div class="slds-picklist--draggable slds-grid">
  <div class="slds-form-element">
  <span class="slds-form-element__label" aria-label="select-1">First Category</span>
  <div class="slds-picklist slds-picklist--multi">
    <ul class="slds-picklist__options slds-picklist__options--multi shown">
      <li draggable="true" id="po-8-0" class="slds-picklist__item" aria-selected="false" tabindex="0" role="option">
        <span class="slds-truncate">
          <span>Option One</span>
        </span>
      </li>
      <li draggable="true" id="po-9-1" class="slds-picklist__item" aria-selected="false" tabindex="-1" role="option">
        <span class="slds-truncate">
          <span>Option Two</span>
        </span>
      </li>
      <li draggable="true" id="po-10-2" class="slds-picklist__item" aria-selected="false" tabindex="-1" role="option">
        <span class="slds-truncate">
          <span>Option Three</span>
        </span>
      </li>
      <li draggable="true" id="po-11-3" class="slds-picklist__item" aria-selected="false" tabindex="-1" role="option">
        <span class="slds-truncate">
          <span>Option Four</span>
        </span>
      </li>
      <li draggable="true" id="po-12-4" class="slds-picklist__item" aria-selected="false" tabindex="-1" role="option">
        <span class="slds-truncate">
          <span>Option Five</span>
        </span>
      </li>
      <li draggable="true" id="po-13-5" class="slds-picklist__item" aria-selected="false" tabindex="-1" role="option">
        <span class="slds-truncate">
          <span>Option Six</span>
        </span>
      </li>
      <li draggable="true" id="po-14-6" class="slds-picklist__item" aria-selected="false" tabindex="-1" role="option">
        <span class="slds-truncate">
          <span>Option Seven</span>
        </span>
      </li>
      <li draggable="true" id="po-15-7" class="slds-picklist__item" aria-selected="false" tabindex="-1" role="option">
        <span class="slds-truncate">
          <span>Option Eight</span>
        </span>
      </li>
    </ul>
  </div>
</div>
<div class="slds-grid slds-grid--vertical">
  <button class="slds-button slds-button--icon-container">
    <c:svg styleClass="slds-button__icon" path="/assets/icons/utility-sprite/svg/symbols.svg#left"/>
    <span class="slds-assistive-text">Arrow left</span>
  </button>
  <button class="slds-button slds-button--icon-container">
    <c:svg styleClass="slds-button__icon" path="/assets/icons/utility-sprite/svg/symbols.svg#right"/>
   <span class="slds-assistive-text">Arrow right</span>
  </button>
</div>
<div class="slds-form-element">
  <span class="slds-form-element__label" aria-label="select-2">Second Category</span>
  <div class="slds-picklist slds-picklist--multi">
    <ul class="slds-picklist__options slds-picklist__options--multi shown"></ul>
  </div>
</div>
<div class="slds-grid slds-grid--vertical">
  <button class="slds-button slds-button--icon-container">
    <c:svg styleClass="slds-button__icon" path="/assets/icons/utility-sprite/svg/symbols.svg#up"/>
    <span class="slds-assistive-text">Arrow up</span>
  </button>
  <button class="slds-button slds-button--icon-container">
    <c:svg styleClass="slds-button__icon" path="/assets/icons/utility-sprite/svg/symbols.svg#down"/>
     <span class="slds-assistive-text">Arrow down</span>
  </button>
</div>
</div>
</apex:pageBlockSection>
 </apex:outputPanel> 
  </apex:pageBlock>
   </apex:form>
    </apex:page>

Answer 1

Why don't you opt ALJS plugin which can help you implement the multi-select picklist with ease?

I have used it in VF page and it works fine. Here is the link to it: https://salesforcekinks.wordpress.com/2016/12/10/slds-forms-components-using-jquery-aljs/

Kindly refer and let me know if you have any questions? Thanks