如何在引導列中並排嵌套div？

在我的網格中，在一列中，我有2個div，它們都是內聯塊。問題是，當文本很長時，它會轉移到左側，並且沒有正確對齊。我甚至嘗試將它從內聯塊更改爲兩個div浮動：左，但它沒有任何區別。如何在引導列中並排嵌套div？

我希望它像右邊的2列一樣對齊，但是一旦文字變長，它就不會換行，但會被移位。 demo

演示與HTML5：http://codepen.io/anon/pen/OPRwPr

HTML：

<header> 
</header> 
<main class="contain"> 
    <div class="row"> 
    <div class="col-1-3"> 
     <div class="title px30 lh60 pad-left-hard"> 
     Some Title 
     </div> 
     <div class="content pad-left-hard"> 
     <p> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut eos doloribus ea enim, iure porro inventore, architecto illum accusamus, esse modi. Laudantium iure deleniti, earum ducimus, ullam reprehenderit rerum. Nemo. 
     </p> 
     </div> 
    </div> 
    <div class="col-1-3"> 
     <div class="title px30 lh60 pad-left-hard"> 
     Some Title 
     </div> 
     <div class="content pad-left-hard"> 
     <p> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut eos doloribus ea enim, iure porro inventore, architecto illum accusamus, esse modi. Laudantium iure deleniti, earum ducimus, ullam reprehenderit rerum. Nemo. 
     </p> 
     </div> 
    </div> 
    <div class="col-1-3"> 
     <div class="title px30 lh60 pad-left-hard"> 
     Some Title 
     </div> 
     <div class="content pad-left-hard"> 
     <p> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut eos doloribus ea enim, iure porro inventore, architecto illum accusamus, esse modi. Laudantium iure deleniti, earum ducimus, ullam reprehenderit rerum. Nemo. 
     </p> 
     </div> 
    </div> 
    </div> 
</main> 
<footer> 

</footer>

CSS：

body { 
    margin: 0; 
    padding: 0; 
} 

.splash-container { 
    position: relative; 
    display: none; 
    width: 100%; 
    height: 10px; 
    background-size: cover; 
    background-image: url("../img/clouds.jpg"); 
} 

.menu-container { 
    height: 50px; 
    //background: #2B2B2B; 
    position: fixed; 
    top: 0; 
    z-index: 1; 
    width: 100%; 
} 

.splash-logo { 
    height: 400px; 
} 

.splash-image-container { 
    position: absolute; 
    width: 100%; 
    height: 200px; 
    text-align: center; 
} 

.main-points { 
    min-height: 450px; 
    background: #222; 
    padding: 75px; 
} 

.points-container { 
    width: 100% 
} 

.points-icon { 
    display: inline-block; 
    color: #069076; 
    vertical-align: top; 
} 

.points-text { 
    vertical-align: top; 
    display: inline-block; 
    color: white; 
    padding: 3px 0px 0px 20px; 
} 

.points-title { 
    font-size: 18px; 
    font-weight: bold; 
    margin: 0; 
} 

.points-desc { 
    font-size: 14px; 
    margin: 0; 
    padding: 0; 
    color: #999; 
}

來源

2014-12-28 chromedome