Resize block after text wrap
I want to create pricing list like on image. I use flex container on each line, inside are two text blocks and hr between them.
If name text is too long, it takes whole space and wraps to next line.
Problem: its block keeps whole width, which makes hr disappear.
Alternatively I tried
which makes hr take all available space, but forcefully wraps name to longest word.
And making
prevents name from ever wrapping when needed.
How can I solve it? Flexbox is not required if there are other ways to do it.
Main condition is to take full width, stretch hr, keep small space between text and hr, align all items at bottom when wrapping
If name text is too long, it takes whole space and wraps to next line.
Problem: its block keeps whole width, which makes hr disappear.
Alternatively I tried
which makes hr take all available space, but forcefully wraps name to longest word.
And making
prevents name from ever wrapping when needed.
How can I solve it? Flexbox is not required if there are other ways to do it.
Main condition is to take full width, stretch hr, keep small space between text and hr, align all items at bottom when wrapping
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Similar Threads
Was this page helpful?
