How to make and <input> appear on the same line on an HTML form?

Question

I am creating a registration form for a website. I want each label and its corresponding input element to appear on the same line.

Here\'s my code:

Answer 1

I've done this several different ways but the only way I've found that keeps the labels and corresponding text/input data on the same line and always wraps perfectly to the width of the parent is to use display:inline table.

CSS

.container {
  display: inline-table;
  padding-right: 14px;
  margin-top:5px;
  margin-bottom:5px;
}
.fieldName {
  display: table-cell;
  vertical-align: middle;
  padding-right: 4px;
}
.data {
  display: table-cell;
}

HTML

    

        Student
    
    

        
    


    

        Email