INPUT[TYPE=RADIO] Label Formatting

Question

Good morning to you all. Forgive me if this question has already been asked here but I have looked and found nothing similar. I’m putting together a survey to be used in smartphones and I have a few options ( input[type=radio] ) with extended Abels. This is breaking the lines unpleasantly (image attached). Could someone give me a hint on how to fix this, that is, the line below is aligned in the first row column ? Follow the attached HTML code. Thanks in advance.

<label>13. Qual &eacute; a categoria com maior dificuldade na compra ?</label>
<div>
	<input type='radio' name='ck_categoria' value='1' class='checkbox-template' style='' onclick=''>RA&Ccedil;&Otilde;ES
	<br>
	<input type='radio' name='ck_categoria' value='2' class='checkbox-template' style='' onclick=''>MEDICAMENTOS
	<br>
	<input type='radio' name='ck_categoria' value='3' class='checkbox-template' style='' onclick=''>BIOL&Oacute;GICOS
	<br>
	<input type='radio' name='ck_categoria' value='4' class='checkbox-template' style='' onclick=''>HIGIENE E BELEZA (COSM&Eacute;TICOS)
	<br>
	<input type='radio' name='ck_categoria' value='5' class='checkbox-template' style='' onclick=''>LIMPEZA (AREIA, TAPETE, FRALDA E DESINFETANTES)
	<br>
	<input type='radio' name='ck_categoria' value='6' class='checkbox-template' style='' onclick=''>ACESS&Oacute;RIOS
	<br>
	<input type='radio' name='ck_categoria' value='7' class='checkbox-template' style='' onclick=''>SNACKS
	<br>
	<input type='radio' name='ck_categoria' value='8' class='checkbox-template' style='' onclick=''>OUTROS (favor especificar)
	<br>
	<input type='text' disabled id='ck_categoria_outros' name='ck_categoria_outros' data-msg='' class='form-control' value='' maxlength='200'>
</div>

Answer 1

The way you set up your list is not cool, besides not being semantic.

I suggest you use a UL/LI with display:flex so you get what you want and leave things better formatted in HTML, using a listing and a <label> to the <input>

ul {
  list-style: none;
  width: 200px;
}

li {
  display: flex;
}

<ul>
  <li>
    <input type="checkbox" id="n1">
    <label for="n1">label</label>
  </li>
  <li>
    <input type="checkbox" id="n2">
    <label for="n3">label muito muito muito muito longa</label>
  </li>
  <li>
    <input type="checkbox" id="n3">
    <label for="n3">label muito muito muito muito longa</label>
  </li>
</ul>