Не получается расположить объекты

Question

Хочу расположить label'ы и input'ы так, как показано на моих каракулях на скриншоте, но в итоге почему то выходит то, что находиться слева. Очень много времени потратил, так и не понял причину. Помогите!

form {
  margin: 0 auto;
  display: block;
  max-width: 350px;
  background: lightblue;
}

form::after {
  content: "";
  display: block;
  width: 100%;
  clear: both;
}

form div input {
  float: right;
}

form div label {
  float: right;
  margin-right: 10px;
}

<form action="">
  <div>
    <input type="text" required>
    <label for="">Полное имя</label>
  </div>

  <div>
    <input type="text" required>
    <label for="">Логин</label>
  </div>
</form>

Answer 1

form {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin: 0 auto;
  max-width: 350px;
  background: lightblue;
}

form div {
  display: flex;
}

form div label {
  margin-right: 10px;
}

<form action="">
  <div>
    <label for="">Полное имя</label>
    <input type="text" required>
  </div>

  <div>
    <label for="">Логин</label>
    <input type="text" required>
  </div>
</form>

С отступами сами пошаманьте)

БЛОГ НА HUSL

Не получается расположить объекты

Ответы (1 шт):