このCSSレイアウトで左右のコンテンツを均等に整列する方法

Question

私はこのウィンドウをモバイルサイズにリサイズするときにこのレイアウト（データ間の境界線）を保持したいウェブサイトを用意しています。すべては右の列で約10文字までうまく機能しますが、それ以上の値がある場合は新しい行にジャンプし、内容は左側のデータと一致しません。ご覧のように、「First | Lorem Ipsum」はうまく整列していますが、「Second |ここではLorem Ipsumの幅広いコンテンツがあります」とレイアウト全体が乱れています。何とかそれを修正する方法はありますか？ここで

が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

ブートストラップを使用している場合。説明リストを使うことをお勧めします。それはあなたが望むことを与えるでしょう。

FYI：あなたは例えば.COL-MD-3、常に行を使用して、それで列を入れ

<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> 

ここ

以上の列クラスを使用する場合：http://getbootstrap.com/css/#description

Answer 2

あなたはそれをこのように試みることができる：各項目について、あなたは新しい行を作成します。幅が狭すぎて新しい行が作成されると、右の列だけでなく、両方の列が下に移動します。

<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>