Two-Column Form Layout Template

Create a compact, grid-like form layout for desktops with this responsive two-column template.

Using CSS Flexbox, this layout places related fields side-by-side on wider screens, then automatically stacks them into a single, mobile-friendly column on narrow screens.

Screenshot of a form with First Name and Last Name fields side-by-side in a two-column layout.

Get Source Code → Preview →

About this Two-Column Layout Form

While a single column is often best, a two-column layout can be very effective for grouping short, related inputs and saving vertical space on desktop monitors. This template achieves this responsive behavior with modern CSS.

The fields you want to appear side-by-side are wrapped in a container div. This container is styled with display: flex; which arranges its children horizontally. A gap property creates space between them. A CSS media query then targets smaller screens and changes the container's flex-direction to column, seamlessly stacking the fields for a perfect mobile view. This approach is superior to older methods using floats, as Flexbox provides much better control over alignment and spacing.

Features

Space-Efficient Desktop View: Reduces the form's overall height on wider screens.
Fully Responsive: Automatically stacks to a single column on mobile, ensuring a great user experience everywhere.
Modern CSS: Built with Flexbox, the modern standard for this type of layout.
Flexible: You can mix and match two-column rows with full-width, single-column rows within the same form.

Ideal Use Cases

Forms with short, related fields like First/Last Name, City/State, or Start/End Dates.
Billing and shipping address forms.
Complex configuration or settings pages in web applications.

Dependencies

None. This template uses only pure HTML and CSS.

Code

Here's the full code for the responsive two-column form layout:

/* -- Start layout styles -- */
/* A container for a row that will hold columns */
.form-row {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap if needed, though we handle stacking with media queries */
    gap: 20px; /* The space between the columns */
    margin-bottom: 20px;
}
.form-row .form-group {
    flex: 1; /* Allows each form group to grow and take up equal space */
    min-width: 200px; /* Prevents columns from getting too squished before stacking */
    margin-bottom: 0;
}
/* This handles single, full-width rows */
.form-group:not(.form-row .form-group) {
    margin-bottom: 20px;
}

/* -- Responsive stacking for mobile -- */
@media (max-width: 600px) {
    .form-row {
        flex-direction: column;
        gap: 0; /* Remove gap when stacking */
    }
    .form-row .form-group {
        margin-bottom: 20px; /* Add margin back for stacked view */
    }
}
/* -- End layout styles -- */

/* General styling for labels and inputs */
.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
}
.form-group input, .form-group select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    box-sizing: border-box;
}

.submit-btn {
    width: 100%;
    padding: 12px;
    border: none;
    background-color: #3498db;
    color: white;
    font-size: 1.1rem;
    border-radius: 5px;
    cursor: pointer;
}
</style>

<div class="two-column-form-container">
    <h2>Shipping Information</h2>
    <form action="#" method="post">
        
        <div class="form-row">
            <div class="form-group">
                <label for="first-name">First Name</label>
                <input type="text" id="first-name" name="first_name" required>
            </div>
            <div class="form-group">
                <label for="last-name">Last Name</label>
                <input type="text" id="last-name" name="last_name" required>
            </div>
        </div>

<div class="form-group">
            <label for="address">Street Address</label>
            <input type="text" id="address" name="address" required>
        </div>

<div class="form-row">
            <div class="form-group">
                <label for="city">City</label>
                <input type="text" id="city" name="city" required>
            </div>
            <div class="form-group">
                <label for="state">State / Province</label>
                <input type="text" id="state" name="state" required>
            </div>
        </div>

<div class="form-row">
            <div class="form-group">
                <label for="zip-code">Zip / Postal Code</label>
                <input type="text" id="zip-code" name="zip_code" required>
            </div>
            <div class="form-group">
                <label for="country">Country</label>
                <select id="country" name="country" required>
                    <option>United States</option>
                    <option>Canada</option>
                    <option>Mexico</option>
                </select>
            </div>
        </div>

<button type="submit" class="submit-btn">Submit</button>
    </form>
</div>

View Output