How to align left and right content equally in this css layout - html

Question

I have a website where I would like to keep this layout(with border between data), when the window is resized to mobile size. Everything works well up to some 10 characters in the right column, but when there is more than that it jumps to a new row, and the content is no more aligned with the data on the left side. As you can see, the "First | Lorem Ipsum" stay well aligned, but "Second | Here's some wider content Lorem Ipsum" disturb the whole layout. Is there a way to fix it somehow?
Here's link to Codepen: http://codepen.io/anon/pen/MJWjJJ?editors=1100
.view__content--info p {
font-weight: bold;
}
.view__content--border {
border-left: 1px solid grey;
}
<div class="row">
<div class="col-md-8">
<div class="col-md-6 col-sm-6 col-xs-6 text-right view__content--info">
<p>First</p>
<p>Second</p>
<p>Third</p>
<p>Fourth</p>
<p>Fifth</p>
<p>Sixth</p>
</div>
<div class="col-md-6 col-sm-6 col-xs-6 view__content--border">
<p>Lorem Ipsum</p>
<p>Here's some wider content Lorem Ipsum</p>
<p>Hello World</p>
<p>Ipsum</p>
<p>Something</p>
<p>Here</p>
</div>
</div>
</div>

Answer 1

As you are using bootstrap. I suggest you use description lists. It will give you want you want.
FYI: When you use a column class e.g .col-md-3 , always use a rows and put the columns in it
<dl class="dl-horizontal">
<dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd>
<dt>Euismod</dt>
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
<dt>Felis euismod semper eget lacinia</dt>
<dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
</dl>
More here : http://getbootstrap.com/css/#description

Answer 2

You could try it this way: For each item you create a new row. When the width is too small and a new line is created, both columns will move down, instead of just the right column.
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6 text-right view__content--info">
<p>First</p>
</div>
<div class="col-md-6 col-sm-6 col-xs-6 view__content--border">
<p>Lorem Ipsum</p>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6 text-right view__content--info">
<p>Second</p>
</div>
<div class="col-md-6 col-sm-6 col-xs-6 view__content--border">
<p>Here's some wider content Lorem Ipsum</p>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6 text-right view__content--info">
<p>Third</p>
</div>
<div class="col-md-6 col-sm-6 col-xs-6 view__content--border">
<p>Hello World</p>
</div>
</div>
</div>
</div>