Creating lines along both the heading and paragraph

Hopefully there’s a simple solution for this - I’d just like to create responsive lines that go horizontally from the left and right of the heading, but also turn down along the left vertical of the paragraph below. It’s straightforward to make a div block into a horizontal line, but how can I have the line turn vertical at a corner? Below is a photo of the figma design I’m working from. I’d rather not use an SVG since I want this line to be responsive to the width of the page.

What’s the best solution here?

Thanks for your help.

If the vertical goes the full length of the contents, I’d just use a DIV with a top and left border. Text contents inside.

The top heading would just be text in another DIV, that is position-offset relative

Here’s a mockup-

And readonly;

https://preview.webflow.com/preview/demo-text-box?utm_medium=preview_link&utm_source=designer&utm_content=demo-text-box&preview=521abefdafd2205d27730cbb1914fc86&workflow=preview

This is perfect. I really appreciate you making the little mockup as well. So much simpler than I was making it out to be in my head. Thank you!!

1 Like