Out of the box, the Email Opt-in module layout is as shown in the bellow Image:
Customize the Email Opt-in module to display the fields inline (side-by-side)
Open the Email Opt-in module settings and delete the Title text and the Body Text
Go to Advanced Tab → CSS ID & Classes → CSS Class and type in
divi-eom- this will be a CSS class assigned to the Email Opt-in module that will be used in the following CSS code.Add the following CSS code to Divi → Theme Options → General Tab → Custom CSS
@media (min-width: 768px) {
.divi-eom .et_pb_newsletter_fields {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 20px;
}
.divi-eom .et_pb_newsletter_form p.et_pb_newsletter_field {
padding-bottom: 0;
}
}The above CSS Code uses CSS Grid.
The result can be seen below:
Note: Adding the above CSS Code to Divi → Theme Options → General Tab → Custom CSS, you might get errors.
Please ignore those since those are false positives, and the reason why they appear as errors is that the WordPress syntax checker has to be updated to recognize valid CSS units and properties.