CSS center positioning

Issue

I have kind of difficult css positioning for me and need help.
The problem is a have a row of div with flex-wrap: wrap. (picture 1)

picture 1

Each div have 50% width so we have 2 columns.
I need each input of 2 element in row have to be on the the same position. (picture 2)

picture 2

You can see that all element on the same label, independent of title’s height and error’s height.
I tried to use align-items: flex-start/end, but it doesn’t work cause if you use start you depend on title’s height and if you use flex-end then you depend on error’s height. In both way moved on the different level.
I hope that I explained clear.
Can you tell me how I can achieve this behavior?

I tried to use different flex-items properties value, but it didn’t work.
I would appreciate if you tell me how to place divs like on the picture 2.

Solution

I created a pen to demonstrate how this can be done with CSS Grid, but for those that want to see the code, here it is:


<form class="form">
  <div class="form-group">
    <label for="1">Input label</label>
    <input id="1" type="text">
  </div>
  <div class="form-group">
    <label for="2">Input label</label>
    <input id="2" type="text">
    <div>Some error, maybe long</div>
  </div>
    <div class="form-group">
    <label for="3">Input label</label>
    <input id="3" type="text">
  </div>
  <div class="form-group">
    <label for="4">Input label</label>
    <input id="4" type="text">
    <div>A really, lreally looooooong error message that wraps onto multiple lines and may never happen in real life</div>
  </div>
    </div>
    <div class="form-group">
    <label for="5">Input label that is running onto multiple lines and is the root of the issue</label>
    <input id="5" type="text">
          <div>A really, lreally looooooong error message that wraps onto multiple lines and may never happen in real life</div>
  </div>
  <div class="form-group">
    <label for="6">Input label</label>
    <input id="6" type="text">
  </div>
</form>
.form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1rem;
}
.form-group {
  display: grid;
  grid-template-rows: 1fr auto 1fr;
}
label {
  font-weight: bold;
  align-self: end;
}

The use of grid-template-rows, and not aligning elements using the grid container is the secret here.

Answered By – Morgan Feeney

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published