title: How to make nested divs in a bootstrap column side by side?
body: <p>In my grid, inside a column, I have 2 divs which are both inline-block. The problem is that when text is long, it shifts to the left side and is not aligned properly. I even tried changing it from inline-block for both divs to float: left but it doesnt make a difference.</p>
  
  <p>I want it aligned like the 2 columns to the right, but once text gets long, it doesnt wrap, but gets shifted.
  <img src="https://i.imgur.com/ggSi1nm.png" alt="demo"></p>
  
  <p><strong>Demo with html5:</strong> <a href="http://codepen.io/anon/pen/OPRwPr" rel="nofollow noreferrer">http://codepen.io/anon/pen/OPRwPr</a></p>
  
  <p><strong>html:</strong></p>
  
  <pre><code>    &lt;header&gt;
  &lt;/header&gt;
  &lt;main class="contain"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-1-3"&gt;
        &lt;div class="title px30 lh60 pad-left-hard"&gt;
          Some Title
        &lt;/div&gt;
        &lt;div class="content pad-left-hard"&gt;
          &lt;p&gt;
            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.
          &lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-1-3"&gt;
        &lt;div class="title px30 lh60 pad-left-hard"&gt;
          Some Title
        &lt;/div&gt;
        &lt;div class="content pad-left-hard"&gt;
          &lt;p&gt;
            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.
          &lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-1-3"&gt;
        &lt;div class="title px30 lh60 pad-left-hard"&gt;
          Some Title
        &lt;/div&gt;
        &lt;div class="content pad-left-hard"&gt;
          &lt;p&gt;
            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.
          &lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/main&gt;
  &lt;footer&gt;
  
  &lt;/footer&gt;
  </code></pre>
  
  <p><strong>css:</strong></p>
  
  <pre><code>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;
  }
  </code></pre>