Как сделать чтобы текст стал ровно при checkbox

Question

У меня есть вот такой вот блок :

и мне нужно чтобы текст не переносился под чекбокс а стоял ровно вот так

.custom-checkbox{
  display: inline-block;
  margin-right: 16px;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(98, 96, 104, 0.1);;
  border-radius: 24px;
  vertical-align: sub;
  position: relative;
}
.custom-checkbox::before{
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    background: #29B961;
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: 0.2s ease;
}
.real-checkbox:checked + .custom-checkbox::before{
  transform: translate(-50%, -50%) scale(1);
}
.real-checkbox:checked + .custom-checkbox{
  border: 2px solid #29B961;;
}
.checkboxes-contact .checkbox-contact{
  font-family: 'Gilroy';
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  color: #626068;
}
.checkboxes-contact{
  display: flex;
  flex-direction: column;
}
.real-checkbox{
  display: none;
}

                        <div class="checkboxes-contact">
                            <label class="checkbox-contact">
                                <input type="checkbox" class="real-checkbox">
                                <span class="custom-checkbox"></span>
                                Я хочу подписаться на рассылку новостей INSITE UNION 
                            </label>
                            <label class="checkbox-contact">
                                <input type="checkbox" class="real-checkbox">
                                <span class="custom-checkbox"></span>
                                 <span>Я даю разрешение INSITE UNION на хранение и обработку моей контактной информации, чтобы связаться со мной по поводу их продуктов и услуг* </span>
                            </label>
                        </div>

Answer 1

.checkbox-contact{display: flex;}

Answer 2

Самое простое что можно предложить - использовать display: flex.

.custom-checkbox{
  display: inline-block;
  margin-right: 16px;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(98, 96, 104, 0.1);;
  border-radius: 24px;
  vertical-align: sub;
  position: relative;
}
.custom-checkbox::before{
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    background: #29B961;
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: 0.2s ease;
}
.real-checkbox:checked + .custom-checkbox::before{
  transform: translate(-50%, -50%) scale(1);
}
.real-checkbox:checked + .custom-checkbox{
  border: 2px solid #29B961;;
}
.checkboxes-contact .checkbox-contact{
  font-family: 'Gilroy';
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  color: #626068;
}
.checkboxes-contact{
  display: flex;
  flex-direction: column;
}
.real-checkbox{
  display: none;
}

.custom-checkbox {
  min-width: 20px; /* чтобы не плющило */
}

label.checkbox-contact {
  display: flex;
}

<div class="checkboxes-contact">
    <label class="checkbox-contact">
        <input type="checkbox" class="real-checkbox">
        <span class="custom-checkbox"></span>
        Я хочу подписаться на рассылку новостей INSITE UNION 
    </label>
    <label class="checkbox-contact">
        <input type="checkbox" class="real-checkbox">
        <span class="custom-checkbox"></span>
         <span>Я даю разрешение INSITE UNION на хранение и обработку моей контактной информации, чтобы связаться со мной по поводу их продуктов и услуг* </span>
    </label>
</div>

Я дописал 2 правила (.custom-checkbox можно слить с ранее объявленным)

Обновление

В качестве дополнения к ответу я провел оптимизацию верстки и стилей, возможно этот вариант тоже будет полезен, тут убран лишний span в разметке:

.real-checkbox {
  visibility: hidden;
}
.checkbox-contact > span::before {
  content: '';
  display: inline-block;
  position: relative;
  width: 14px;
  height: 14px;
  top: 4px;
  margin-left: -35px; /* переносим чекбокс левее */
  margin-right: 17px; /* отодвигаем первую строку вправо */
  background: transparent;
  box-shadow: inset 0 0 0 10px white;
  border: 2px solid rgba(98, 96, 104, 0.1);;
  border-radius: 50%;
  transition: box-shadow 0.2s ease;
}
.checkbox-contact > .real-checkbox:checked + span::before {
  background: #29B961;
  box-shadow: inset 0 0 0 3px white;
}
.real-checkbox + span {
  padding-left: 20px;  /* освобождаем место для чекбокса */
}
label.checkbox-contact {
  display: flex;
  margin-bottom:  10px;
}

<div class="checkboxes-contact">
  <label class="checkbox-contact">
    <input type="checkbox" checked class="real-checkbox">
    <span>Я хочу подписаться на рассылку новостей INSITE UNION</span> 
  </label>
  <label class="checkbox-contact">
    <input type="checkbox" class="real-checkbox">
    <span>Я даю разрешение INSITE UNION на хранение и обработку моей контактной информации, чтобы связаться со мной по поводу их продуктов и услуг* </span>
  </label>
</div>

БЛОГ НА HUSL

Как сделать чтобы текст стал ровно при checkbox

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