Here's a cool way to display text in columns:
<div class="content-box" style="column-width: 8em">
<p>blah blah...</p>
<p>blah blah...</p>
<p>blah blah...</p>
</div>
However, when it comes to the textarea, it doesn't align with the column-wise layout like the rest of the text does:
<div class="content-box" style="column-width: 8em">
<p>blah blah...</p>
<textarea rows="100"></textarea>
<p>blah blah...</p>
<p>blah blah...</p>
</div>
I'm looking for a way to include a textarea that flows seamlessly with the text across columns. It should resemble the surrounding text but be editable. Is there a solution for this?
My goal is to create a mad-libs application with a multi-column text layout (similar to a newspaper) where certain sections are fill-in-the-blank and editable. The editable areas might be lengthy and I'd like them to smoothly transition into the next column if needed, just like regular text.