Home i want to align my elements so that they start in the same place (vertically)

Questions

i want to align my elements so that they start in the same place (vertically)

February 7, 2022

I try to do some CSS and I have 4 items on a line.
I would like to align my 2 "sous-jacent de référence" but I don’t know how can I do it.
I tried to use position: relative but it didn’t work

there is my code:

body {
  background-color: rgb(0, 0, 0);
  text-align: center;
}

.title {
  color: white;
  border: 2px solid black;
  margin: 2%;
  padding-bottom: 2%;
}

.left {
  padding-left: 2%;
  float: left;
  color: white;
  font-size: 20px;
  padding-top: 2%;
}

.left2 {
  padding-left: 2%;
  float: left;
  color: white;
  font-size: 20px;
  padding-top: 2%;
}

.left3 {
  color: white;
  font-size: 20px;
  padding-top: 2%;
  position: absolute;
}

.right {
  float: left;
  padding-left: 30%;
  color: white;
  font-size: 20px;
  padding-top: 2%;
}

.right2 {
  float: left;
  padding-left: 30%;
  color: white;
  font-size: 20px;
  padding-top: 2%;
}

<!DOCTYPE html>
<html>

<head>

</head>

<body>

  <div class="title">
    <h2>Formulaire</h2>

  </div>

  <div class="left">
    typologie du produit
  </div>
  <div class="left2">
    <input type="text" id="typologie" name="typologie" required minlength="2" maxlength="50" size="10"> </div>
  <div class="right">
    Sous-jacent de référence
  </div>
  <div class="left2">
    <input type="text" id="Sous-jacent" name="Sous-jacent" required minlength="2" maxlength="50" size="10"> </div>

  <div class="left">
    Nom du produit


  </div>
  <div class="left2">
    <input type="text" id="typologie" name="typologi2" required minlength="2" maxlength="50" size="10"> </div>

  <div class="right">
    Sous-jacent de référence
  </div>
  <div class="left2">
    <input type="text" id="Sous-jacent" name="Sous-jacent2" required minlength="2" maxlength="50" size="10"> </div>



</body>

</html>

I want to say to my algorithm: "my 3 and div begins at x%"

I tried a lot of things (it works when I use float: right but it’s quite confusing)

Thanks for your help!

>Solution :

You can try using flex to align your items in your layout. Is it works for you?

body {
  background-color: rgb(0, 0, 0);
  text-align: center;
}

.title {
  color: white;
  border: 2px solid black;
  margin: 2%;
  padding-bottom: 2%;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
  color: white;
  column-gap: 1rem;
  row-gap: 1rem;
}

.wrapper > div {
  display: flex;
  width: calc(50% - .5rem);
  column-gap: 1rem;
}

/*.left {
  padding-left: 2%;
  float: left;
  color: white;
  font-size: 20px;
  padding-top: 2%;
}

.left2 {
  padding-left: 2%;
  float: left;
  color: white;
  font-size: 20px;
  padding-top: 2%;
}

.left3 {
  color: white;
  font-size: 20px;
  padding-top: 2%;
  position: absolute;
}

.right {
  float: left;
  padding-left: 30%;
  color: white;
  font-size: 20px;
  padding-top: 2%;
}

.right2 {
  float: left;
  padding-left: 30%;
  color: white;
  font-size: 20px;
  padding-top: 2%;
}*/

<!DOCTYPE html>
<html>

<head>

</head>

<body>

  <div class="title">
    <h2>Formulaire</h2>
  </div>

  <div class="wrapper">
    <div>
      <div class="left">
        typologie du produit
      </div>
      <div class="left2">
        <input type="text" id="typologie" name="typologie" required minlength="2" maxlength="50" size="10"> </div>

    </div>

    <div>
      <div class="right">
        Sous-jacent de référence
      </div>
      <div class="left2">
        <input type="text" id="Sous-jacent" name="Sous-jacent" required minlength="2" maxlength="50" size="10"> </div>
    </div>

    <div>
      <div class="left">
        Nom du produit


      </div>
      <div class="left2">
        <input type="text" id="typologie" name="typologi2" required minlength="2" maxlength="50" size="10"> </div>
    </div>

    <div>
      <div class="right">
        Sous-jacent de référence
      </div>
      <div class="left2">
        <input type="text" id="Sous-jacent" name="Sous-jacent2" required minlength="2" maxlength="50" size="10"> </div>

    </div>
  </div>

</body>

</html>