How to align two boxes in a line?

How to align two text boxes on same line with CSS

• I have two text boxes that by default, use "display: block;" style. I want to keep the label above the first textbox, but I want the second textbox to be shown just to the right of the first text box. Here is my view: <div class="form-group"> @Html.LabelFor(model => model.DescriptiveSize, "Descriptive Size") @*2014-04-11: Issue #93*@ @Html.TextBoxFor(model => model.DescriptiveSize, null, new { @class = "form-control", maxlength = "10",style = "width:25%;" }) @Html.DropDownList("UomList", ViewData["UomList"] as SelectListItem[], new { @class = "form-control",style = "width:25%;" }) @Html.ValidationMessageFor(model => model.DescriptiveSize) </div> Here is how it looks: EDIT: And here is the HTML:

• Answer:

  You can add a "float: left" property to your two textboxes. It makes it align on same line. HTML ABC<br /> <div id="textbox1"></div> <div id="textbox2"></div> CSS #textbox1, #textbox2 { display: block; float: left; width: 100px; height: 100px; } #textbox1 { background-color: red; } #textbox2 { background-color: blue; } See http://jsfiddle.net/blck/H499e/