title: How do I vertically align sets of radio buttons?
body: <p>I am new to html and css.</p>
  
  <p>I have 3 sets of radio buttons.  Each set of buttons is displayed in a singe line.  I would like the buttons to align vertically between sets of buttons.  I am having trouble accomplishing this with css.  I would like to avoid using tables to solve this problem.  I figured I could get the radio buttons aligned by setting the width of their labels, but it doesn't work.  </p>
  
  <p>My radio buttons display like this:</p>
  
  <p><img src="https://i.stack.imgur.com/E31gy.jpg" alt="misaligned radio buttons"></p>
  
  <p>I want them to display like this:</p>
  
  <p><img src="https://i.stack.imgur.com/hMxE8.jpg" alt="aligned radio buttons"></p>
  
  <p>Here's my css:</p>
  
  <pre><code>form.remit_change_form label.fixedwidth {
      display: block;
      width: 180px;
      float: left;
  }
  
  form.remit_change_form input.radiolabel {
      width: 35px /* doesn't make any visual change! */
  }
  </code></pre>
  
  <p>Here's my html:</p>
  
  <pre><code>&lt;div&gt;
    &lt;label for="tran_code" class="fixedwidth"&gt;Tran Code&lt;/label&gt;
    &lt;input type="radio" class="radioinput" name="tran_code" id="tran_code_22" 
      value="22"/&gt;
    &lt;label for="tran_code_22" class="radiolabel"&gt;22&lt;/label&gt;
    &lt;input type="radio" class="radioinput" name="tran_code" id="tran_code_42" 
      value="42"/&gt;
    &lt;label for="tran_code_42" class="radiolabel"&gt;42&lt;/label&gt;
    &lt;input type="radio" class="radioinput" name="tran_code" id="tran_code_52" 
      value="52"/&gt;
    &lt;label for="tran_code_52" class="radiolabel"&gt;52&lt;/label&gt;
    &lt;input type="radio" class="radioinput" name="tran_code" id="tran_code_na" 
      value="NA"/&gt;
    &lt;label for="tran_code_na" class="radiolabel"&gt;NA&lt;/label&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;label for="cut_off_time" class="fixedwidth"&gt;Cut-off Time&lt;/label&gt;
    &lt;input type="radio" class="radioinput" name="cut_off_time" id="cut_off_time_18.00" 
      value="18.00"/&gt;
    &lt;label for="cut_off_time_18.00" class="radiolabel"&gt;18.00&lt;/label&gt;
    &lt;input type="radio" class="radioinput" name="cut_off_time" id="cut_off_time_19.00" 
      value="19.00"/&gt;
    &lt;label for="cut_off_time_19.00" class="radiolabel"&gt;19.00&lt;/label&gt;
    &lt;input type="radio" class="radioinput" name="cut_off_time" id="cut_off_time_na" 
      value="NA"/&gt;
    &lt;label for="cut_off_time_na" class="radiolabel"&gt;NA&lt;/label&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;label for="remit_notify_method" class="fixedwidth"&gt;Remit Notify Method&lt;/label&gt;
    &lt;input type="radio" class="radioinput" name="remit_notify_method" 
      id="remit_notify_method_n" value="N"/&gt;
    &lt;label for="remit_notify_method_n" class="radiolabel"&gt;N&lt;/label&gt;
    &lt;input type="radio" class="radioinput" name="remit_notify_method" 
      id="remit_notify_method_f" value="F"/&gt;
    &lt;label for="remit_notify_method_f" class="radiolabel"&gt;F&lt;/label&gt;
    &lt;input type="radio" class="radioinput" name="remit_notify_method" 
      id="remit_notify_method_e" value="E"/&gt;
    &lt;label for="remit_notify_method_e" class="radiolabel"&gt;E&lt;/label&gt;
  &lt;/div&gt;
  </code></pre>