I'm trying to create a printable dynamic HTML form but I cannot arrange the questions and answers on the page the way I want.
I have a flex container for a pair of question and answer and I expect the text in either of them to be wrapped if it's too long. The issue is that once the text is wrapped, it leaves a lot of empty horizontal space. This is not my desired outcome, especially for the question (left).
How can I preferably keep using CSS flexbox and text-wrap while not having that extra white space? I prefer the solution to be with pure HTML and CSS and I am hesitant to implement any JavaScript due to performance concerns.
Image may be NSFW.
Clik here to view.
<div class="container"><div class="question">Breathing Circuit for Bedside Ventilator:</div><div class="answer">Quantity Other Than Physician Order (5)</div></div>.container { width: 100%; display: flex; flex-direction: row; justify-content: stretch; align-items: center; gap: 0.7em;}.container .question { flex: 0 1 auto; text-wrap: balance;}.container .answer { flex: 1 1 auto; text-wrap: pretty;}CodeSandbox:https://codesandbox.io/p/sandbox/n6883s
