Plugin Contact Form 7: How to make the form two-column?

Up to now a plugin own solution is still missing to convert the form to two columns. The following adjustments allow a manual solution.

Adjustments in the form itself:

<div class="wps-form">
    <!-- Line 1  -->
    <div class="wps-form-row">
        <!-- Column 1 -->
        <div class="wps-form-column">
            [text* your-name placeholder "Name*"]
        </div>
        <!-- Column 2 -->
        <div class="wps-form-column">
            [email* your-email placeholder "E-Mail*"]
        </div>
    </div>
    <!-- End of line 1 -->
</div>

Additions for the CSS file:

.wps-form {
    width: 100%;
    margin: 0 auto;
}
.wps-form-row {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.wps-form-row .wpcf7-form-control {
    width: 100%;
}
.wps-form-column {
    flex: 1;
    padding: 0.5rem 0;
    width: 100%;
}
@media only screen and ( min-width: 48em ) { 
    .wps-form-row {
        flex-direction: row;
    }
    .wps-form-column {
        padding: 0.5rem 1rem;
    }
}
Without cookies
This website does not use cookies or tracking. More information can be found in the privacy policy.