0

I have markup like this (can be modified if needed):

<div class="form-group">
  <div class="form-element error">
    <label for="from" class="form-label">From with a long label lorem ipsum dolor </label>
    <input class="form-input" id="from">
    <div class="form-error">A short error</div>
  </div>
  <div class="form-separator">-</div>
  <div class="form-element error">
    <label for="to" class="form-label">To</label>
    <input class="form-input" id="to">
    <div class="form-error">A long error lorem ipsum dolor sit amet consectetur adipiscing</div>
  </div>
</div>

I want to achieve a layout like this: Form example

where

  • The inputs will be aligned regardless of how long the labels or error messages are
  • The labels and error messages area aligned towards the input fields, there should be no space between them
  • The separator is aligned with the inputs

I believe that what I need is CSS grid but I can't figure out whether a layout like this is possible. Or is this a case where I should use a table?

Zifnab
  • 25
  • 5
  • CSS-Grid won't help (yet) - https://stackoverflow.com/questions/56711501/align-child-elements-of-different-blocks – Paulie_D Jan 20 '20 at 11:04
  • I agree that that question discusses a very similar problem. However, the solution does not necessarily have to use grid and allows for changes to the HTML. Perhaps the question was closed as a duplicate a bit too early? – Zifnab Jan 20 '20 at 11:36
  • If you edit the question to advise that you are happy to change the HTML I'd consider re-opening it but then it would probably be **too broad**....but as I said, there is **NO** CSS layout method that would align children of different parents. – Paulie_D Jan 20 '20 at 11:39
  • "I have markup like this (can be modified if needed)". That was already part of the original question. I get the feeling that I could flatten my HTML to have the labels and inputs as direct children of `.form-group` from what you are saying? – Zifnab Jan 20 '20 at 11:41
  • That's basically OK but it's still pretty broad. You have to research different methods yourself. – Paulie_D Jan 20 '20 at 11:43

0 Answers0