Crafting a good email copy is not an easy thing and is time-consuming. Let's pretend you have been working for hours to sort content out, and in the end, you've noticed that the containers are not vertically aligned as supposed.
Like in this sample:
As you can see, these containers look strange, as the first one is longer and the second one is shorter. The text and buttons are not on the same level.
Do not worry we will show you how to fix it with vertical alignment, and good thing we have even 2 options on how to do it.
Use the Spacer block for the vertical alignment.
Let's drag-and-drop the spacer block under our text block;
Switch the spacer mode to "Space";
Starch to the needed height;
Done! Now our two containers are on the same level.
Fix the container's height via the code editor.
Click on the desired block to which you want to set the height (in our case, I want to set the height for the block with the description) and open the code editor;
Add height attribute to the tag <td> to the code; here is a sample of the code height="61px" you can replace the number in brackets with your own;
Important to note: you can find out the height of each element via dev tools.
I'm going back to our case, so I want to check the height of this first description block.
How to do that? Easy, go to the preview mode, and open the dev tools. To do that, press the F12 button on the keyboard.
Hover the mouse over the desired block, and you will see the block's height.
Now you know why I set exactly 61 pixels to the second container.
To align the text in the second container to the top, add valign="top" to the code;
Done! Great job; our containers are on the same level now.
Thank you for taking the time to read our articles. We hope you will find this information helpful.
If you have any additional questions, please email us at email@example.com.
We would be glad to talk with you.