Html 列中的内容未正确对齐

我有以下设置：

为什么每次我在左栏添加新行时，右栏中的文本都会降低？我需要一行从这列的顶部开始

<div class="container">  
  <form class="form-large">
      <div class="left-col">line1<br />line2<br />line3</div>   
      <div class="right-col">this line should be at the top of this column</div>
  </form>
</div>

---

添加

垂直对齐：顶部到右栏的css

OT:您设置了两次宽度。
将
float:right
添加到右侧列，您可能需要增加JSFIDLE窗口的宽度。
这就成功了。还有一件事，我在两列之间添加了一个垂直分隔符，但它只延伸到右列内容的结尾处。这里是代码：如何使它延伸到表单的底部？在左列放置一个
右边框
，在右列放置一个
左边框，然后使用负边距将两个边框置于彼此上方（
。右列{margin left:-1px；}`可能会起作用）。如果您不介意将右列也保留到页面底部，请添加宽度：100%；在你的右边栏。你是说身高：100%？我试过了，但没用：@ShadyPotato的确，我指的是身高：100%。但要使百分比值起作用，需要定义父高度。如果你不想有固定的值，使用thirdenders建议-它应该画一条线，直到更大的列的底部。Yu需要为左列的css添加这些行：
右边框：1px solid#d6；右边距：-5px
.form-large {
    max-width: 1000px;
    padding: 14px 14px 14px;
    margin: 0 auto 20px;
    background-color: #fff;
    border: 1px solid #d6d6d6;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.left-col {
    display: inline-block;
    width: 640px;
    padding-left: 11px;    
}
.right-col {
    display: inline-block;
    width: 300px;
    width: 300px;
    padding-left: 14px;
    /*border-left: 1px solid #d6d6d6;*/
}