Force a textarea to be on the same line with other elements

Question

I have a webpage with the following layout:

Text            
Radio Button    
Radio Button    
Button

I want to add a textarea that will be on the same line as the elements, like:

Text            **********
Radio Button    *Textarea*
Radio Button    **********
Button          **********

(the asterixes mark the place occupied by the textarea)

But it ends up being just under the elements:

Text            
Radio Button    
Radio Button    
Button          
**********
*Textarea*
**********
**********

What CSS styling should I apply to resolve this problem?

Answer 1

you need to float your content or use the inline-block option

Here is an exemple of what you want:http://jsfiddle.net/uDLZF/3/

CSS

#first, #second{
    float:left;
}
ul { list-style-type: none; }

HTML

  <div>
        <ul id="first">
            <li>Text </li>     
            <li>Radio Button  </li> 
            <li>Radio Button  </li> 
            <li>Button </li>         
        </ul>
        <ul id="second">
            <li>**********</li>   
            <li>*Textarea*</li> 
            <li>**********</li> 
            <li>**********</li>         
        </ul> 
    </div>