I have a details page containing a list of information and input fields at the same time. Sections are alternating between information and input fields.
I am debating between the alignment of data. Option 1 is having the information align with the left of the input boxes, Option 2 is having the text align with each other (whether it is in an input box or not).
Is there a correct way to do this alignment or is this more opinion based.
There are several reasons for this:
Better alignment. For boxed input elements (i.e. with outlines, borders or shadows), the vertical | edges of the box tend to attract the eye as it scans down the left column so the form will be perceived as more organized if that vertical line is left-aligned.
Correct use of white space. For grid-aligned columns like your layout, the eye uses the margin of white space next to the column to perceive the column itself. Elements which intrude into that white space will feel misaligned to the user, and create cognitive dissonance. Here's an example of how noticeable the intrusion is (the layout still feels organized, but doesn't feel as much like a column anymore):
Better differentiation of the field itself. An input field is different from text. Aligning the whole field with the text paragraph provides correct visual semantics because you want the user to read the paragraph then perceive the input field first (i.e. "this is an interactive element, which is different from plain text") before reading placeholder or text values.
Visual hierarchy. For traditional form design where labels appear on top of the input boxes, the slight offset of the placeholders from the input box edge helps provide a label->input visual hierarchy which can help with scan lines and organization for the whole form.
Apple iTunes payment form
Google signup form
Facebook signup form
Again, this is a general rule so there may be exceptions for specific UX reasons (e.g. deliberate use of dissonance, faded outlines, etc) or different widget designs (e.g. single underline input boxes).
For a more complete article on form design, I'd recommend Luke Wroblewski's presentation on form design as an overview, but there are plenty more resources out there.
Thinks this is rather opinion based. I believe its more common that the information to be aligned with the text boxes, i.e. option 1.
however besides to your question, think you should also consider labels above the textboxes which seems to be easier to use http://uxmovement.com/forms/faster-with-top-aligned-labels/
this is also quite a detailed guide http://www.smashingmagazine.com/2011/11/08/extensive-guide-web-form-usability/
This is a common question in design schools, and the answer is really easy: you should align the left extreme of a paragraph or block of content with the left extreme of the input field. Basically, exception made of content blocks with paddings (like blockquotes), all text should be aligned according to the desired alignment option (left, right, center).
And this is very easy to prove: simply write your html with no styling at all and you will see what happens. This is for many reaons, but just think of this: if you align the input inner content with paragraphs, then when input fields are empty they will be out of line. Or in 0 padding boxes, the input will overflow the container. And so on.
In short, your first option is the correct one in terms of design
