title: How do i make Radio to be on the left with CSS
body: <p>Im trying to replicate the
  <a href="https://codepen.io/freeCodeCamp/full/VPaoNP" rel="nofollow noreferrer">freeCodeCamp Survey Form</a></p>
  <p>When i use inline-block it only works only after .form-control input.</p>
  <p>And I only want to use it for radio , but it seems like it doesn't work when I put [type=&quot;radio&quot;] after .form-control input.</p>
  <p>Can someone describe what is wrong? Thank you guys.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>form{
    background-color: grey;
    max-width: 450px;
    margin: 0 auto;
    padding: 30px
    
  }
  
  
  .form-control{
    margin-bottom: 40px;
    text-align: left;
  }
  
  .form-control label{
    display: block;
    margin-bottom: 10px;
    
  }
  
  .form-control input, .form-control select{
   
    border: 1px solid #777;
    border-radius: 3px;
    padding: 8px;
    display: block;
    width: 100%;  
    
  }
  
  .form-control input [type="radio"]{
    width: auto;
    display:inline-block;
   
    
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="form-control"&gt;
     &lt;label&gt; Would you recommend freeCodeCamp to a friend?&lt;/label&gt;
          
        &lt;label for="Definitely"&gt; &lt;input type="radio" id="Definitely" name=RadioRecommend&gt; Definitely &lt;/label&gt;
          
        &lt;label for="Maybe"&gt; &lt;input type="radio" id="Maybe" name=RadioRecommend&gt; Maybe &lt;/label&gt;
          
        &lt;label for="Not sure "&gt; &lt;input type="radio"  id="Not sure" name=RadioRecommend&gt; Not sure &lt;/label&gt;
        
            &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>