Vertically align text of different lengths in div in top left corner

Hi everyone,

I’m having trouble with a simple layout and would appreciate some help.

Given two divs with each a text element inside (different lengths), how can I align them vertically in the top left corner in a rotated manner (see screenshot)? Whatever I’m trying, I end up with different spacings between text and div - After hours of trying, I could really use some support. Thanks so much!


Here is my site Read-Only: Webflow - Valentin's Top-Notch Site

Hi there,

To align your divs in the top left corner using flexbox, you’ll need to make a few adjustments in the Style panel. Start by setting your parent div block to Display: Flex. Then, use the direction control to set the flex direction to vertical (the down arrow icon). In the alignment controls, set the Y axis dropdown to “Top” and the X axis dropdown to “Left”. These settings will position your flex children at the top left of the container.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

Set the parent div to position: relative, then absolutely position each text block inside with top: 0; left: 0; transform: rotate(...). Had to do this on a client build,absolute positioning keeps them locked to the same top-left point regardless of text length.

Thanks for your response!
Unfortunately, this is not doing it for me, as you can see below. The text boxes then go outside of the relative parent element.
What am I doing wrong?

Before rotating:

After rotating:

Hey @heja223 ,

Can you add a custom property for the Text block which you want to align in a specific manner, as highlighted in the screenshot below. You can see the result in the screenshot as well.

Hope this helps.

1 Like

Thank you sooo much, this is exactly what I was looking for! I really appreciate it! :heart:

1 Like