How to center labels and inputs with spans-CodePudding

I hope you all doing well!
I want to re-order fields and labels like this image :
labels have more spaces beside inputs which they also have the same width!

* {
  padding: 0px;
  margin: 0px;
}

.form-fieldset {
  width: max-content;
  padding: 5px;
  margin: 5px;
}

.row {
  display: flex;
  justify-content: space-between;
}

<fieldset >
  <legend>Formulaire d'inscripton :</legend>
  <div >
    <label for="inp1">Votre nom:</label>
    <input id="inp1"  type="text" /><span>Le Champ est obligatoire</span
        >
      </div>
      <div >
      <label for="inp2">Votre prénom:</label>
      <input id="inp2"  type="text" /><span
        >Le prénom doivent avoir 10 caractéres en minuminat</span
      >
    </div>
      <div >
        <label for="inp3">Votre Age: </label>
        <input id="inp3"  type="nombre" />
        <span>Age est un nombre de deux chiffres</span>
  </div>

  <div >
    <label for="inp4"> Votre adresse email:</label>
    <input id="inp4"  type="email" />
    <span>ecrire une adresse</span> mail est valide
  </div>
</fieldset>

This is my first post on SOF, Please Help Me?

CodePudding user response：

Try it.
I put all labels Votre nom: Votre prénom: Votre Age: Votre Age: Votre adresse email: in one column. All inputs in another column and all spans in another column. All columns I put inside row. column means display:flex; flex-direction:column;.

* {
  padding: 0px;
  margin: 0px;
}

.form-fieldset {
  width: max-content;
  padding: 5px;
  margin: 5px;
}

.col {
  display: flex;
  flex-direction:column;
  justify-content: space-between;
  padding:0 5px;
}

.row {
 display:flex;
}

<fieldset >
  <legend>Formulaire d'inscripton :</legend>
    <div >
      <div >
          <label for="inp1">Votre nom:</label>
          <label for="inp2">Votre prénom:</label>
          <label for="inp3">Votre Age: </label>
          <label for="inp4"> Votre adresse email:</label>
      </div>
      <div >
          <input id="inp1"  type="text" />
          <input id="inp2"  type="text" />
          <input id="inp3"  type="nombre" />
          <input id="inp4"  type="email" />
      </div>

      <div >
          <span>Le Champ est obligatoire</span>
          <span>Le prénom doivent avoir 10 caractéres en minuminat</span>
          <span>Age est un nombre de deux chiffres</span>
          <span>ecrire une adresse</span> mail est valide
      </div>
  </div>
</fieldset>

CodePudding user response：

Here some guide to flexbox to better understand its behavior. I've put some comment in your code (html untouched):

* {
  padding: 0px;
  margin: 0px;
}

.form-fieldset {
  /* width: max-content; */
  /* does not work well with 'line feed' on spans causing them to stretch beyond container, so i turned it off */
  padding: 5px;
  margin: 5px;
}

.row {
  display: flex;
  justify-content: stretch; /* childrens will try to fill all width of container based on its width*/
  gap: 10px; /* just for some space between element */
}
.row>*{
  flex-shrink:0; /* no shrinking, allowed proportionally by default */
}
.row label{
  flex-basis: 140px; /* set width to constant */
}
.row input{
  flex-basis: 120px; /* set width to constant */
}
.row span{
  flex-shrink: 1; /* shrink this on case of small-width container */
  flex-basis: auto; /* change in case you need to limit width*/
  flex-grow:1; /* allow grow for this elements, 0 by default */
}

<fieldset >
  <legend>Formulaire d'inscripton :</legend>
  <div >
    <label for="inp1">Votre nom:</label>
    <input id="inp1"  type="text" /><span>Le Champ est obligatoire</span
        >
      </div>
      <div >
      <label for="inp2">Votre prénom:</label>
      <input id="inp2"  type="text" /><span
        >Le prénom doivent avoir 10 caractéres en minuminat</span
      >
    </div>
      <div >
        <label for="inp3">Votre Age: </label>
        <input id="inp3"  type="nombre" />
        <span>Age est un nombre de deux chiffres</span>
  </div>

  <div >
    <label for="inp4"> Votre adresse email:</label>
    <input id="inp4"  type="email" />
    <span>ecrire une adresse</span> mail est valide
  </div>
</fieldset>

NOTE: Also this task can be achieved using grids on .row based on display:grid and grid-template-columns:120px 120px auto (plus some extra for better visuals).

ALSO: last .row have text behind span: miss-copy&paste?