我是 html 和 css 的新手，所以请耐心等待。我在引导程序中有一行，有两列。我想将左列中的 div 与右列中的 div 垂直对齐。我怎样才能做到这一点？
具体来说，我想在左边有文本的 div 来解释右边的某些元素。例如，假设正在阅读一本书，但在页面的左边距有一些标注，这些标注定义了与这些单词对齐的单词。
右栏中的内容是动态的。我知道某些 div 会出现，我只是不知道它们在垂直方向上的确切位置。
这是一个 jsfiddle：http: //jsfiddle.net/dylanlingelbach/C73ap/。这应该是我正在尝试做的事情的一个相当小的复制品。在我的实际情况下，中断是我不知道大小的 html 内容。
我正在使用引导程序 2。
如果可能的话，我宁愿在没有 javascript 的情况下这样做。我确信我可以通过在右列中找到 div 的位置并动态调整左列中 div 的绝对位置来动态地做到这一点，但我觉得纯 CSS 解决方案会更优雅。
HTML：
<div class="modal">
<div class="modal-header">
<button type="button" class="close cancel" aria-hidden="true">×</button>
<h2 id="invite-modal-label">Some text</h2>
</div>
<div class="modal-body">
<div class="row-fluid">
<div class="span3">
<div class="one">
Align with #anchor1
</div>
<div class="two">
Align with #anchor2
</div>
</div>
<div class="span9 padded">
Content
<br/><br/><br/><br/><br/><br/>
<div id="anchor1">
#anchor1
</div>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<div id="anchor1">
#anchor2
</div>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
Text at the end
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-success confirm">Send</button>
<button class="btn btn-danger cancel">Cancel</button>
</div>
</div>
CSS：
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
.modal {
width: 60%;
left: 5%;
margin: auto auto auto auto;
}
.one {
border:1px solid black;
}
.two {
border:1px solid black;
}
更新： 我不想重新格式化我的 html。右栏中的内容是单独呈现的。本质上，这些数据显示在几个地方，并非所有地方都有左栏。我想保持我的代码将右列的内容与标记的其余部分分开。