How to put an input element on the same line as its label?

There are several approaches to make an input element the same as its label. Few approaches are discussed here. Basic CSS to label, span, and input to get clear outputs.

Using float and overflow attributes: Make a label and style it with float attribute. Now set the label float(position) left or right according to your requirement. This will align your label accordingly. Overflow property for input is used here to clip the overflow part and show the rest.

  • Example:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en">
      
    <head>
      
        <style>
            h1 {
                color: green;
            }
              
            label {
                float: left;
            }
              
            span {
                display: block;
                overflow: hidden;
                padding: 0px 4px 0px 6px;
            }
              
            input {
                width: 70%;
            }
        </style>
    </head>
      
    <body>
        <h1>GeeksforGeeks</h1>
        <label for="test">Enroll with us:</label>
        <span>
            <input name="test" id="test" 
                   type="text" placeholder="Enter your input"/>
        </span>
    </body>
      
    </html>

    chevron_right

    
    

  • Output:

Using table cell attribute in display property: Make a label inside a div and give the display property. To make the input element and span as equally placed use table-cell attribute in those tags. This attribute makes the element behaves a td element. Whatever item is to be made nearby, the table-cell attribute does it.

  • Example:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en">
      
    <head>
      
        <style>
            h1 {
                color: green;
            }
              
            .container {
                display: table;
                width: 100%
            }
              
            label {
                display: table-cell;
                width: 1px;
                white-space: nowrap;
            }
              
            span {
                display: table-cell;
                padding: 0 4px 0 6px;
            }
              
            input {
                width: 70%;
            }
        </style>
    </head>
      
    <body>
        <h1>GeeksforGeeks</h1>
      
        <div class="container">
            <label for="test">Enroll with us:</label>
            <span><input name="test" id="test" 
                         type="text" 
                         placeholder="Enter your input" />
            </span>
        </div>
    </body>
      
    </html>

    chevron_right

    
    

  • Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.