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!
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?
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.