title: Preventing irregular gaps with the text CSS
body: <p>I want to prevent irregular gaps between my inputs and my text. How should I do this with a CSS property?</p>
  
  <p>For example that my input will be placed all over that red line: 
  <a href="https://i.stack.imgur.com/Tz4QQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Tz4QQ.png" alt="enter image description here"></a><br>
  My HTML:</p>
  
  <pre><code>&lt;body&gt;
  &lt;div&gt;
      &lt;p class ="LabelInput"&gt;Programme/CP/Ville       
      &lt;input type="text" id="cp" name="cp"
             placeholder="" /&gt;
      &lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div class = "Typologie"&gt;
      &lt;p class ="LabelInput"&gt;Typologie       
      &lt;input type="checkbox" id="Studio" name="Studio" checked /&gt;
       &lt;label for="Studio"&gt;Studio&lt;/label&gt;
  
       &lt;input type="checkbox" id="T2" name="T2" checked /&gt;
       &lt;label for="T2"&gt;T2&lt;/label&gt;
  
       &lt;input type="checkbox" id="T3" name="T3" checked /&gt;
       &lt;label for="T3"&gt;T3&lt;/label&gt;
  
       &lt;input type="checkbox" id="T4" name="T4" checked /&gt;
       &lt;label for="T4"&gt;T4&lt;/label&gt;
  
       &lt;input type="checkbox" id="T5P" name="T5P" checked /&gt;
       &lt;label for="T5P"&gt;T5P&lt;/label&gt;
   &lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div class = "Type"&gt;
      &lt;p class ="LabelInput"&gt;Type        
      &lt;input type="checkbox" id="Appartement" name="Appartement" checked /&gt;
       &lt;label for="Appartement"&gt;Appartement&lt;/label&gt;
  
       &lt;input type="checkbox" id="Maison" name="Maison" checked /&gt;
       &lt;label for="Maison"&gt;Maison&lt;/label&gt;
  
       &lt;input type="checkbox" id="Commerce" name="Commerce" checked /&gt;
       &lt;label for="Commerce"&gt;Commerce&lt;/label&gt;
  
       &lt;input type="checkbox" id="Parking" name="Parking" checked /&gt;
       &lt;label for="Parking"&gt;Parking&lt;/label&gt;
       &lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div class = "Budget"&gt;
      &lt;p class ="LabelInput"&gt;Budget       
      &lt;div id="slider-range"&gt;&lt;/div&gt;
      &lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div class = "Livraison"&gt;
      &lt;p class ="LabelInput"&gt;Livraison        
      &lt;input type="text" id="cp" name="cp"
             placeholder="" /&gt;
             &lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div class = "Annexes"&gt;
      &lt;p class ="LabelInput"&gt;Annexes        
      &lt;input type="text" id="cp" name="cp"
             placeholder="" /&gt;
             &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>I'm sure it is something you can do but I can't remember or find the property.</p>