How to put checkbox next to input text?

Question

css

I want to make it so that the checkbox is to the left of the input text, when I try to do this I have the checkbox above the text itself, how can I fix this?
I tried to apply align-self: flex-start; but does not work!

<form class="forms" action="#">
        <input class="name" type="text" name="name" placeholder="Имя*" required >
        
         <input class="number" type="phone" name="tel" placeholder="Телефон*" required >
         
         <input class="mail" type="email" name="e_mail" placeholder="E-mail*" required >
         
         <input class="request" type="text" name="request" placeholder="Просьба и условия" required >
         <input id="formAgreement" checked type="checkbox" name="agreement" class="checkbox_input" required >
       <label for="formAgreement" class="form_label"><span>Я принимаю условия конфиденциальности</span></label>

.form_label span {
    font-size: 15px;
  }
  .checkbox_input {
  }

  [type="checkbox"]:not(:checked),
  [type="checkbox"]:checked {
    position: absolute;
    left: -9999px;
  }
  [type="checkbox"]:not(:checked) + label,
  [type="checkbox"]:checked + label {
    position: relative;
    padding-left: 25px;
    cursor: pointer;
  }

  /* checkbox aspect */
  [type="checkbox"]:not(:checked) + label:before,
  [type="checkbox"]:checked + label:before {
    content: '';
    position: absolute;
    left:0; top: 2px;
    width: 16px; height: 16px;
    border: 1px solid #aaa;
    border-radius: 3px;
  }
  /* checked mark aspect */
  [type="checkbox"]:not(:checked) + label:after,
  [type="checkbox"]:checked + label:after {
    content: '✔';
    position: absolute;
    top: 3px; left: 4px;
    font-size: 18px;
    line-height: 0.8;
    color: #989898;
    transition: all .2s;
  }
  [type="checkbox"]:not(:checked) + label:after {
    opacity: 0;

  }

Answer 1

Firstly, no flex works on elements with position: absolute - from the point of view of other objects on the page, such elements do not exist, they are excluded from the grid.
Second, to get your checkbox to the left of the text - mind you, from the label text, not input[type=checkbox]! - they need to be wrapped in a single block. Then you don’t have to drive to position: absolute, it will already stand on the left if this single block has the property display: flex, or display: block, and the input has float: left.
Thirdly, why create two before and after pseudo-elements, and besides, with the same values ​​when the checkbox is checked and unchecked ??? Moreover and to hang up opacity??? Let's just say it's crooked.
And now some code:

<div class="my-checkbox">
   <input id="formAgreement" checked type="checkbox" name="agreement" class="checkbox_input" required >
   <div class="checked"></div> <!-- место для чекбокса-->
    <div> <!-- еще один контейнер, чтобы можно было выровнять по центру --->
            <label for="formAgreement" class="form_label">
                 <span>Я принимаю условия конфиденциальности</span>
             </label>
    </div>
</div>

And css:

.form_label span {
    font-size: 15px;
    position: relative; /*придаем блоку свойство для создания возможности позиционирования в блоке*/
  }
  .checkbox_input {
      position: absolute;
      left: -999999px;   /*прячем чекбокс за пределы видимости*/
  }


  label {
     text-decoration: underline;
     color: red;
     cursor: pointer; /*чтобы все поняли, что сюда нужно нажимать*/
  }

  .checked { /*квадратик для галочки*/
    width: 16px;
    height: 16px;
    border: 1px solid #aaa;
    border-radius: 3px;
  }
 
  [type="checkbox"]:checked .checked {  /*появление галочки при нажатии на label*/
    content: '✔';
   display: block;
    font-size: 18px;
    line-height: 0.8;
    color: #989898;
    transition: all .2s;
  }

/* и собственно выравнивание */
.my-checkbox {
   display: flex;
   align-items: center;
}