How to make `and` appear on the same line on an HTML form?

html

responsive-design

css-grid

flexbox

byAlex Kataev·Feb 19, 2025

Achieve horizontal alignment of a <label> and <input> by declaring their CSS display property as inline-block, or envelop them within a flex container.

<style>
.form-inline label, .form-inline input {
    display: inline-block; /* On the same line, like we're in kindergarten again */
}
.form-flex > div {
    display: flex; /* Endless flexibility, just like your yoga instructor */
}
</style>

<!-- Inline-block method -->
<form class="form-inline">
    <label for="name">Name:</label><input type="text" id="name">
    <!-- Other fields -->
</form>

<!-- Flex container method -->
<div class="form-flex">
    <div><label for="email">Email:</label><input type="email" id="email"></div>
    <!-- Other fields -->
</div>

Choose display: inline-block for ease or a flex container for layout adaptability without additional CSS for spacing or alignment.

Organizing multiple form fields

When handling multiple form elements, group your <label> and <input> pairs using <div> elements or custom classes. This creates a neat and organized layout. For complex layouts, take advantage of CSS Grid for better control.

Catering to accessibility and responsive design

Promote accessibility by connecting a <label> to an <input> using the for attribute. This enhances screen reader support and form usability. Make your forms responsive by using media queries to ensure proper alignment, even on smaller screens.

Precise layout with CSS configuration

Assign form groups with container-related properties like text-align or margin for overall alignment and spacing. Manage width for <input> fields for a uniform look and feel. Use box-sizing: border-box, it guarantees elements retain their size regardless of padding or borders.

Embracing modern layout techniques

For clean code and easy maintenance, adopt modern techniques like Flexbox or CSS Grid. Flex containers make floats obsolete and provide better control for alignment.

Flexbox Magic for Alignment

Flexbox simplifies alignment. To build a professional layout, use display: flex:

.form-flex-group {
    display: flex;
    align-items: center; /* Vertically centers elements */
    justify-content: space-between; /* Equal spacing, just like mom's meatballs */
}