title: How to display text next to radio button?
body: <p>got a question on radio buttons. Got a html code and css code below but what is happening is that I have 2 radio buttons and each radio button has a text next to it. The first radio button states "Male"and the other radio button states "Female".</p>
  
  <p>Now "Male" is display next to the radio button which is fine, but "Female" is displayed below the radio button. If I make the table where the whole radio buttons and text are stored wider, then both "Male" and "Female" are displayed under their radio buttons and not next to them.</p>
  
  <p>So my question is what needs to be changed in my css/html code in order to display "Male" and "Female" next to their radio buttons?</p>
  
  <p>Below is the html code:</p>
  
  <pre><code>&lt;table id="replies"&gt;
  &lt;tr&gt;
       &lt;th colspan="2"&gt;
       Replies
       &lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt;Gender: &lt;/td&gt;
  &lt;td align="left"&gt;
  &lt;div class="replytd"&gt; 
  &lt;input type="radio" name="reply" value="male" class="replyBtn" /&gt;&lt;span class="replyspan"&gt;Male&lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="replytd"&gt; 
  &lt;input type="radio" name="reply" value="female" class="replyBtn" /&gt;&lt;span class="replyspan"&gt;Female&lt;/span&gt;
  &lt;/div&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>below is the css code:</p>
  
  <pre><code>#replies{
      display:inline-block;
      vertical-align:top;
      min-width:15%;
      max-width:15%;
  }
  
  #replies th{
      border-collapse:collapse;
      border:1px solid black; 
  }
  
  #replies td{
      border-collapse:collapse;
      border:1px solid black; 
      padding:1%;
  }
  </code></pre>