I have prepared a working html example to give us a starting point attached.
I have this setup using CSS and a media query. A few problems:
I want there to be a vertical rule and padding between the labels and the content. But when I add padding or a margin it breaks the label, so it is now on top of the content instead of to the left.
text-align: right; /* when full width make label flush right */
the idea is that when the resolution is smaller, that the label won't be on the left, but instead will flow in the same column.
So in short:
I need there to be padding between and a vertical rule to 100% of the height of the tallest row.
But when the resolution is smaller, it will flow onto the same column with the label on top of the content.
Please help and thanks!