title: How to create a vertical line with the same length as the row in Bootstrap 3
body: <p>I'm having a problem creating a vertical line that has the same length of a parent row a element in bootstrap3. What I'm trying to do is a row with 3 elements in it. The height of the row depends on the column containing the content. Then I'm trying to create a vertical line in a column but i can't get the column having the same height as the content column. </p>
  
  <p>Here is my code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.col-section{
    background-image: url("../img/small_steps.png");
    background-repeat: repeat;
    border: 2px;
    border-radius: 2px;
    border-style: solid;
    border-color: black;
    padding: 10px;
  }
  
  .vertical-line-right{
    background-color: black;
    width: 2px;
    margin-left: 50%;
    height: 10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;div class="row"&gt;
      &lt;div class="col-md-5 pull-left col-section"&gt;
        &lt;p&gt;
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        &lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="col-md-2"&gt;
        &lt;div class="vertical-line-right"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-5 pull-left"&gt;
        &lt;h1&gt;Test&lt;/h1&gt;
      &lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I used a height of 10px for the height of the vertical line to show you a result whereas i want it to dynamically make the height of the "lorem ipsum" div</p>
  
  <p>The result of the snippet is wrong here is what i really get:
  <a href="http://imgur.com/guvMROR" rel="nofollow">http://imgur.com/guvMROR</a></p>
  
  <p>I hope my question is clear enough ! Thank you</p>