Apologies for the vague question title, which may not accurately reflect my requirements. This is one reason why I am struggling to find a solution through a simple Google search - I'm unsure of what terms to use.
I am attempting to align some "label text" alongside some "value text," while ensuring that the value text stays in line even when it spans multiple lines.
For example, here is the desired layout:
Label 1 Value 1
Label 2 Value 2
Label 3 Value 3 is much longer
so it needs to span multiple lines
but should be kept in a neat format
Label 4 Value 4
While I could accomplish this easily with a table, I don't believe a table is suitable in this case. Despite the appearance of the example data, it is unrelated. Actual label examples might include Name, Date, Description, and Reference Number.
In addition, I would prefer to avoid using floating techniques if possible. Using a float would likely require specifying a fixed width to maintain a consistent margin between labels and values.
Aside from that, I am willing to make use of any available elements, and will resort to floats/tables if they are determined as the most effective approach.
I have provided a starting JSFiddle link for those who wish to experiment quickly.
Thank you