How to put two input boxes side by side

Method 1: Using Inline Styles#

One way to put two input boxes side by side in HTML is by using inline styles. Inline styles allow you to apply CSS directly to an HTML element.

1. The outer <div> element uses the display: flex; property to create a flex container.
2. Each <input> element has the style="flex: 1;" property, which makes them flexible and occupy equal space within the container.
3. This method is simple and doesn't require any additional CSS files.

Method 2: Using CSS Float Property#

Another approach is to use the CSS float property. The float property allows you to position elements side by side.

1. Each <input> element has the style="float: left;" property to make them float to the left.
2. The <div style="clear: both;"></div> is used to clear the floats and ensure proper layout.

Method 3: Using CSS Grid Layout#

CSS Grid Layout provides a powerful way to create complex grid-based layouts in HTML.

1. The outer <div> element uses display: grid; to create a grid container.
2. The grid-template-columns: auto auto; property specifies that the container should have two equal-width columns.
3. The <input> elements are automatically placed in the grid cells.

Method 4: Using CSS Flexbox#

CSS Flexbox is another option for creating flexible layouts in HTML.

1. The outer <div> element uses display: flex; to create a flex container.
2. The <input> elements are automatically positioned side by side within the container.
3. By default, the flex items will have equal width.

Method 5: Using CSS Bootstrap Grid System#

If you are using the Bootstrap framework, you can take advantage of its built-in grid system to achieve the desired layout.

<div class="row">
  <div class="col">
    <input type="text">
  </div>
  <div class="col">
    <input type="text">
  </div>
</div>

1. The outer <div> element has the class "row" to create a row within the grid system.
2. Each <div> element with the class "col" represents a column.
3. The inputs are placed inside the columns, and the Bootstrap grid system automatically handles the layout.