Vertically align divs across bootstrap columns - html

Question

I'm new to html and css so bear with me here. I have a row in bootstrap with two columns. I want to vertically align divs in the left column with divs in the right column. How can I do this?
Concretely, I want to have divs with text on the left that explain certain elements on the right. For example, imagine reading a book but on the left margin of the page there are callouts that define words aligned next to those words.
The content in the right column is dynamic. I know certain divs will be present, I just don't know exactly where they will be vertically.
Here is a jsfiddle: http://jsfiddle.net/dylanlingelbach/C73ap/. It should be a fairly minimal repro of what I am trying to do. In my actual case the breaks are html content that I don't know the size of.
I'm using bootstrap 2.
I'd prefer to do this without javascript if possible. I am sure I can do it dynamically by finding the location of the div in the right column and dynamically adjusting the absolute position of the div in the left column to it but I feel like a pure CSS solution would be more elegant.
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;
}
UPDATE:
I don't want to reformat my html. The content in the right column is rendered separately. Essentially this data is displayed in several places not all of which will have the left column. I'd like to keep my code that renders the content of the right column separate from the rest of the markup.

Answer 1

For each item that you want to vertically align they need to be in their own rows:
<div class="row-fluid">
<div class="span6"></div>
<div class="span6">content content content content content content content content content content content content content content content content content content</div>
</div>
<div class="row-fluid">
<div class="span6">Align with #anchor1</div>
<div class="span6">#anchor1</div>
</div>
Here is the correct jsfiddle

Answer 2

You should probably rework your HTML to support more of the format you are trying to achieve.
I would suggest dividing up each anchor label and it's content into it's own row.
What I did was break up each section into it's own .fluid-row, like this:
<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>
<div class="span9 padded">
Content for anchor 1
<br /><br /><br /><br /><br /><br />
</div>
</div><!-- end .row-fluid -->
<div class="row-fluid">
<div class="span3">
<div class="two">Align with #anchor2</div>
</div>
<div class="span9 padded">
Content for anchor 2
<br /><br /><br /><br /><br /><br />
</div>
</div><!-- end .row-fluid -->
</div>
<div class="modal-footer">
<button class="btn btn-success confirm">Send</button>
<button class="btn btn-danger cancel">Cancel</button>
</div>
</div>
You can see the results of this here: http://jsfiddle.net/C73ap/38/