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?
