I have

<div class='line'> 
  <div class='chord_line'> 
    <span class='chord_block'></span> 
    <span class='chord_block'>E</span> 
    <span class='chord_block'>B</span> 
    <span class='chord_block'>C#m</span> 
    <span class='chord_block'>A</span> 
  </div> 
  <div class='lyric_line'> 
    <span class='lyric_block'></span> 
    <span class='lyric_block'>Just a</span> 
    <span class='lyric_block'>small-town girl</span> 
    <span class='lyric_block'>living in a</span> 
    <span class='lyric_block'>lonely world</span> 
  </div> 
</div>

(Excuse me for not being too familiar with proper css conventions for when to use div/spans)

I want to be able to display them so that each chord_block span and lyric_block span is aligned vertically, as if they were left-aligned and on the same row of a table. For example:

  E      B               C#m         A
  Just a small-town girl living in a lonely world

(There will often be cases where an empty chord block is matched up to non-empty lyric block, and vice-versa.)

I'm completely new to using CSS to align things, and have had no real understanding/experience of CSS aside from changing background colors and link styles. Is this possible in CSS? If not, how could the div/class nesting structure be revised to make this possible? I could change the spans to divs if necessary.

Some things I cannot use:

• I can't change the structure to group things by a chord_and_lyric_block div (and have their width stretch to the length of the lyric, and stack them horizontally), because I couldn't really copy/select the lyrical lines continuously in their entirety, which is extremely critical.
• I'm trying to avoid a table-like solution, because this data is not tabular at all. The chord line and the lyric line are meant to be read as one continuous line, not a set of cells. Also, apart from the design philosophy reasons, I think it might have the same problems as the previous thing bullet point.

If this is possible, what div/span attributes should I be using? Can you provide sample css?

If this is not possible, can it be done with javascript?

EDIT: I'm sorry I wasn't clear at the start, but I would like a solution that allows both the chord line and the lyric line to be "selectable" and continuous.