Как сделать чтобы текст стал ровно при checkbox
У меня есть вот такой вот блок :
и мне нужно чтобы текст не переносился под чекбокс а стоял ровно вот так
.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>
Источник: Stack Overflow на русском