Alignment of photons

Question

I’m trying to align my form this way:

But I can’t get the inputs Yes and No to line up on the right. I tried to use bootstrap and split it into cols but unsuccessfully as well. Follows html and css snippet.

h6{
	display: inline-flex;

}

p{
	display:inline-block;
}

.borda{
	border:1px solid red;
}

<form action="" method="post" id="questionario">

<label for="questao1"><h6>Sente dificuldade para abrir a boca?</h6>
    <div style="float: right;">
    <p><input type="radio" name="questao1" id="questao1-1" value="Sim" > Sim</p>
    <p><input type="radio" name="questao1" id="questao1-2" value="Não" > Não</p>
</div>
</label> <br>

<label for="questao2"><h6>Sente dificuldade para movimentar a mandíbula para os lados?</h6>
    <p><input type="radio" name="questao2" id="questao2-1" value="Sim" > Sim</p>
    <p><input type="radio" name="questao2" id="questao2-2" value="Não" > Não</p>
</label> <br>

<label for="questao3"><h6>Tem cansaço ou dor muscular quando mastiga?</h6>
    <p><input type="radio" name="questao3" id="questao3-1" value="Sim" > Sim</p>
    <p><input type="radio" name="questao3" id="questao3-2" value="Não" > Não</p>
</label> <br>

<label for="questao4"><h6> Sente dores de cabeça com frequência?</h6>
    <p><input type="radio" name="questao4" id="questao4-1" value="Sim" > Sim</p>
    <p><input type="radio" name="questao4" id="questao4-2" value="Não" > Não</p>
</label> <br>

<label for="questao5"><h6> Sente dor na nuca ou torcicolo?</h6>
    <p><input type="radio" name="questao5" id="questao5-1" value="Sim" > Sim</p>
    <p><input type="radio" name="questao5" id="questao5-2" value="Não" > Não</p>
</label> <br>

<label for="questao6"><h6>  Tem dor de ouvido ou nas articulações?</h6>
    <p><input type="radio" name="questao6" id="questao6-1" value="Sim" > Sim</p>
    <p><input type="radio" name="questao6" id="questao6-2" value="Não" > Não</p>
</label> <br>

<label for="questao7"><h6> Já notou ruídos nas articulações quando mastiga ou abre a boca?</h6>
    <p><input type="radio" name="questao7" id="questao7-1" value="Sim" > Sim</p>
    <p><input type="radio" name="questao7" id="questao7-2" value="Não" > Não</p>
</label> <br>

<label for="questao8"><h6>Já observou se tem algum hábito de apertar e/ou rangir os dentes?</h6>
    <p><input type="radio" name="questao8" id="questao8-1" value="Sim" > Sim</p>
    <p><input type="radio" name="questao8" id="questao8-2" value="Não" > Não</p>
</label> <br>

<label for="questao9"><h6>Sente que seus dentes não se articulam bem?</h6>
    <p><input type="radio" name="questao9" id="questao9-1" value="Sim" > Sim</p>
    <p><input type="radio" name="questao9" id="questao9-2" value="Não" > Não</p>
</label> <br>

<label for="questao10"><h6>Você se considera uma pessoa tensa ou nervosa?</h6>
    <p><input type="radio" name="questao10" id="questao10-1" value="Sim" > Sim</p>
    <p><input type="radio" name="questao10" id="questao10-2" value="Não" > Não</p>
</label> <br>




<input onclick="document.getElementById('modal-wrapper1').style.display='block'" type="image" class="bt_enviar" name="enviarContato" alt="Enviar" src="img/spacer.gif" />    
</form>

Answer 1

Since you are using Bootstrap use his Grid. I divided into two columns one of 9 and one of 3 with the inputs. Within the col of the inputs I placed the text on the right with the class text-right, but for responsiveness when the screen gets small the buttons fall to the bottom line and are aligned left with text-left

Follow the image code above:

<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />

<div class="container">
    <form class="" action="">
        <div class="row">
            <div class="col-12 col-md-9">texto</div>
            <div class="col-12 col-md-3 form-check text-left text-md-right">
                <input type="radio" name="grupo" id="n1">sim
                <input type="radio" name="grupo" id="n2" class="ml-3">não
            </div>
        </div>
        <div class="row">
            <div class="col-12 col-md-9">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, recusandae.</div>
            <div class="col-12 col-md-3 form-check text-left text-md-right">
                <input type="radio" name="grupo" id="n3">sim
                <input type="radio" name="grupo" id="n4" class="ml-3">não
            </div>
        </div>
    </form>
</div>

Answer 2

An easy way to do this is with the flex, flex manipulates the elements inside an element, so if you can add the display: flex to his label and tell him to put a space between his elements, like this:

perguntas {
  display: flex; 
  justify-content: space-between;
}

<div class="perguntas">
    <label for="questao1">
        <h6>Sente dificuldade para abrir a boca?</h6>
    </label>
    <p>
        <input type="radio" name="questao1" id="questao1-1" value="Sim" > Sim
        <input type="radio" name="questao1" id="questao1-2" value="Não" > Não
    </p>
</div>

This way a space will be placed between the elements

Answer 3

This helps?

input[type=radio] {
  float: right;
  clear: both;
}

span {
  float: right;
}

<form action="" method="post" id="questionario">

  <label for="questao1"><h6>Sente dificuldade para abrir a boca?</h6>
    <div style="float: right;">
    <span><input type="radio" name="questao1" id="questao1-1" value="Sim"> Sim</span>
    <span><input type="radio" name="questao1" id="questao1-2" value="Não"> Não</span>
</div>
</label> <br>

  <label for="questao2"><h6>Sente dificuldade para movimentar a mandíbula para os lados?</h6>
    <span><input type="radio" name="questao2" id="questao2-1" value="Sim"> Sim</span>
    <span><input type="radio" name="questao2" id="questao2-2" value="Não"> Não</span>
</label> <br>

  <label for="questao3"><h6>Tem cansaço ou dor muscular quando mastiga?</h6>
    <span><input type="radio" name="questao3" id="questao3-1" value="Sim"> Sim</span>
    <span><input type="radio" name="questao3" id="questao3-2" value="Não"> Não</span>
</label> <br>

  <label for="questao4"><h6> Sente dores de cabeça com frequência?</h6>
    <span><input type="radio" name="questao4" id="questao4-1" value="Sim"> Sim</span>
    <span><input type="radio" name="questao4" id="questao4-2" value="Não"> Não</span>
</label> <br>

  <label for="questao5"><h6> Sente dor na nuca ou torcicolo?</h6>
    <span><input type="radio" name="questao5" id="questao5-1" value="Sim"> Sim</span>
    <span><input type="radio" name="questao5" id="questao5-2" value="Não"> Não</span>
</label> <br>

  <label for="questao6"><h6>  Tem dor de ouvido ou nas articulações?</h6>
    <span><input type="radio" name="questao6" id="questao6-1" value="Sim"> Sim</span>
    <span><input type="radio" name="questao6" id="questao6-2" value="Não"> Não</span>
</label> <br>

  <label for="questao7"><h6> Já notou ruídos nas articulações quando mastiga ou abre a boca?</h6>
    <span><input type="radio" name="questao7" id="questao7-1" value="Sim"> Sim</span>
    <span><input type="radio" name="questao7" id="questao7-2" value="Não"> Não</span>
</label> <br>

  <label for="questao8"><h6>Já observou se tem algum hábito de apertar e/ou rangir os dentes?</h6>
    <span><input type="radio" name="questao8" id="questao8-1" value="Sim"> Sim</span>
    <span><input type="radio" name="questao8" id="questao8-2" value="Não"> Não</span>
</label> <br>

  <label for="questao9"><h6>Sente que seus dentes não se articulam bem?</h6>
    <span><input type="radio" name="questao9" id="questao9-1" value="Sim"> Sim</span>
    <span><input type="radio" name="questao9" id="questao9-2" value="Não"> Não</span>
</label> <br>

  <label for="questao10"><h6>Você se considera uma pessoa tensa ou nervosa?</h6>
    <span><input type="radio" name="questao10" id="questao10-1" value="Sim"> Sim</span>
    <span><input type="radio" name="questao10" id="questao10-2" value="Não"> Não</span>
</label> <br>




  <input onclick="document.getElementById('modal-wrapper1').style.display='block'" type="image" class="bt_enviar" name="enviarContato" alt="Enviar" src="img/spacer.gif">
</form>