How to Add Side by Side Buttons in a Column in Divi

A Simple Fix for a Common Divi Limitation

Ever tried to place two Divi buttons next to each other — inside the same column — only to find that they automatically stack vertically? While creating multiple columns is one workaround, it’s not always flexible or ideal. Thankfully, there’s a quick CSS trick that solves this limitation and gives you total control over button placement.

In this Divi tutorial, you’ll learn how to place two or more Button Modules side-by-side inside a single column using a lightweight custom CSS approach. Let’s walk through it step-by-step!

Step 1: Add a Custom CSS Class to the Column

We won’t be modifying the Button Modules themselves. Instead, we’ll apply styling to the column that contains them. This allows us to affect the layout of the buttons at the wrapper level — which is key to aligning them inline.

Here’s what to do:

1. Locate the Row and Column where your buttons will live.
2. Click the gear icon to open the Column Settings.
3. Under Advanced > CSS ID & Classes, add this class name to the CSS Class field:

sms-inline-buttons

Step 2: Add This CSS to Your Site

Now we’ll add the actual styling that makes the button modules display inline instead of stacked.

You can paste this code in one of the following places:

• Appearance → Customize → Additional CSS
• Divi → Theme Options → Custom CSS
• Your child theme stylesheet

/* Force button modules to sit side-by-side */ .sms-inline-buttons .et_pb_button_module_wrapper { display: inline-block; } 

Step 3: Add Your Button Modules

Next, go back into the Visual Builder and insert two or more Button Modules into the same column where you added the inline-buttons class. You’ll now see that the buttons appear next to each other horizontally instead of stacking vertically.

Step 4: Adjust Spacing Between the Buttons

By default, the buttons may appear very close together. You can fix this by adding margin to one of the buttons:

1. Open the settings for the second Button Module.
2. Go to Design → Spacing.
3. Add Left Margin of around 10px.

This will give your buttons some breathing room and look more polished.

Optional: Center the Buttons Horizontally

If you’d like to center the button group within the column, just add the following extra CSS to your existing snippet:

.sms-inline-buttons { text-align: center; } 

This will horizontally center all the buttons inside the column.

That’s It! 🎉

Using this method, you can easily align multiple Divi buttons inline within the same column — no extra columns, plugins, or advanced modules required.

Whether you’re building landing pages, pricing tables, or calls-to-action, having full control over button layout gives you a more professional and flexible design.

More On Divi Buttons