By making divs the labels and input started to be on top of eachother instead of next to eachother, which is exactly what i want. But obviously it looks very sloppy with the textareas. They are like glued together, and doesn’t match perfectly at all in position.
Any ideas how i can fix this in CSS?
Clarification: You see how the input areas are completely off. I want those to be EXACTLY perfectly even and matched, so it doesn’t look as scuffed as it does currently.
UPDATE 2: Fix
I figured it out. Now it’s all even and vertical (Though im not saying this is best or the perfect solution, but it solved my current beginner issue/question).
Proper solution in the answer feed by Nick Vu. Thread closed.
Comment posted by css-tricks.com/snippets/css/a-guide-to-flexbox
Welcome to stackoverflow and welcome to web design 🙂 the easiest fix is to add a width to your labels (and some margins) but this isn’t really long lived. I suggest you have a look at either css-grid or flexbox: To learn flexbox i suggest the following two sites:
Comment posted by dokgu
Not sure I understand you correctly but did you want the
Comment posted by Diego D
Or just as a side note, just an humble suggestion, when you’ll be good enough mastering css concepts (flex/grid/display:inline) you could rely on a css framework like bootstrap that will deal with those details in your behalf.
Comment posted by isherwood
FYI, you don’t have an textareas here. That’s a different type of element. You simply have text inputs.