Alignment of same input Row using form validation

Question

I am developing a React registration form, and for validation of input'I use the Yup.

On the third Row of the form I have 3 input's, when Yup does the validation and inserts the notification messages they are misaligned, follows image:

Follow the CSS of the form:

form {
    display: flex;
    flex-direction: column;

    padding: 20px;
    margin-top: 20px;
    border-radius: 4px;
    background: #fff;

    label {
      font-weight: bold;
      margin: 15px 0 5px 0;
      font-size: 14px;
    }

    input {
      height: 30px;
      border-radius: 4px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      padding-left: 15px;
    }

    div {
      display: flex;
      justify-content: space-between;

      div {
        display: flex;
        flex-direction: column;

        input {
          width: 240px;
        }
      }
    }
}

Answer 1

In

form div {
      display: flex;
      justify-content: space-between;

Exchange for

form div {
      display: flex;
      justify-content: flex-start;

The flex-start will align the internal elements at the top of the container, the space-between ends up aligning an element in each corner of container generating this space between the text and the input

Code of the image above:

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.row {
  display: flex;
  flex-direction: column;
  background-color: teal;
  /* justify-content: space-between; */
  justify-content: flex-start;
  flex-basis: calc(100%/3);
}
.box{
  width: 100%;
  background-color: tomato;
  box-sizing: border-box;
  border: 1px solid #000;
  height: 35px;
}

.container {
  display: flex;
}

Com justify-content: flex-start;

<div class="container">
    <div class="row">
      <div class="box">label 1</div>
      <div class="box">1</div>
      <div class="box">msg</div>
    </div>
    <div class="row">
      <div class="box">label 2</div>
      <div class="box">msg</div>
    </div>
    <div class="row">
      <div class="box">label 3</div>
      <div class="box">3</div>
      <div class="box">msg</div>
    </div>
</div>

Answer 2

The estate justify-content: space-between; positions the two elements at each end of the div (in your case, vertical ends).

By your CSS, you are applying it to the direct daughter Ivs of the form, which is affecting for heredity the subdivs of these Ivs.

Just change these adding subdivs justify-content: flex-start; (see the line commented with /* AQUI!! */ in the code below):

form {
    display: flex;
    flex-direction: column;

    padding: 20px;
    margin-top: 20px;
    border-radius: 4px;
    background: #fff;

    label {
      font-weight: bold;
      margin: 15px 0 5px 0;
      font-size: 14px;
    }

    input {
      height: 30px;
      border-radius: 4px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      padding-left: 15px;
    }

    div {
      display: flex;
      justify-content: space-between;

      div {
        display: flex;
        flex-direction: column;
        justify-content: flex-start; /* AQUI!! */

        input {
          width: 240px;
        }
      }
    }
}

Now, notice that when the message is displayed, there is a break in the grid, causing one div to touch the other. To resolve this, add flex: 1; below the property I suggested above. That force the 3 Divs to maintain width fixed and equal and don’t touch a another.

Take an example:

I changed the width of inputs to 140px just to illustrate.

form {
    display: flex;
    flex-direction: column;

    padding: 20px;
    margin-top: 20px;
    border-radius: 4px;
    background: #fff;
}

form label {
      font-weight: bold;
      margin: 15px 0 5px 0;
      font-size: 14px;
}

form input {
      height: 30px;
      border-radius: 4px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      padding-left: 15px;
}

form div {
      display: flex;
      justify-content: space-between;
}

form div div {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        flex: 1;
}

form div div input {
          width: 140px;
}

<form>
   <div>
      <div>
         <label>Idade</label>
         <input type="text">
          <div>mensagem mensagem mensagem mensagem mensagem mensagem mensagem mensagem</div>
      </div>
     <div>
         <label>Peso</label>
         <input type="text">
      </div>
      <div>
         <label>Altura</label>
         <input type="text">
          <div>mensagem mensagem mensagem mensagem mensagem mensagem mensagem mensagem</div>
      </div>
   </div>
</form>

See how it looks without the properties suggested above:

I recommend you keep the Complete guide on flexbox, which is very useful for references, queries and ask questions.