I'm trying to get a profile page to look like the attached picture (or close to it). I've tried everything (except using tables) that I can think of and got close, but not right.

Here's what I've tried so far:
http://upc.at.utah.gov/sample.html

The 2 sections don't line up and I can't figure out how to get a line / border under each value like in the picture. I don't understand why the 2 blocks don't line up.

Any help is appreciated.

Thanks,

Ron

For this it would be fine to use tables for the profile information part. Just not for the design of the whole website itself.

I was trying to stay away from tables because I want it to be responsive and tables aren't very responsive.

I found the solution by using a combination of spans for the text, a float for the first column and media queries to adjust the size of the profile box as the size of the screen diminished. It works pretty good for me.

I appreciate your suggestion and help.

I've used this for a resp. table:

You can use a media query to adjust/remove the margins at phone sizes and set the text to a smaller size if needed.

You could also use a definition list:

With CSS, you could style this however you wanted, even making it look like a table.

You can use one table and still have a responsive site. Its only when you want to split the table vertically that it ceases to be responsive. The single table works very much like a container. (an edit) provided the table is 100% wide.

Without prejudice:
Any answers or suggestions I offer are from my experience using a variety of web and text editors over a 15 year period.
Other may disagree, even prove me wrong. That's the chance you take using advise from a forum!