Expert Level/Advanced HTML Coding

Description: I have a mobile app (Flutter) that renders protocol/drug-reference cards from HTML using the flutter_widget_from_html (fwfh) package. I need one card's HTML fixed so it renders cleanly, and that fixed card becomes my reusable template. The situation: My HTML renders fine in a normal browser, but fwfh is not a browser — it reflows and breaks differently. On a real phone (Samsung Galaxy S23, which lays out at about 360 logical pixels wide at 3x density), my multi-column layout collapses: the column labels shatter vertically (for example, "Supply/Concentration:" stacks one or two characters per line). I need a layout that survives fwfh at about 360 logical px width. What I'll give you: The current HTML for the card (the one that's breaking) The original source document showing exactly how the card should look (clean, side-by-side layout — see attached target image) A Flutter previewer app (built specifically to render this HTML using the real fwfh package at exact S23 width and density) — this is how you'll test and confirm your fix matches the phone. You must test against this previewer, not a browser, because the browser does not behave like fwfh. Hard requirements: All data must always be visible — nothing can ever drop or be cut off. This is a medical reference; the dose and concentration values cannot disappear at any width. This is the number one rule. It must render correctly in the fwfh previewer at about 360 logical px width (real S23 width), not just in a browser. Font slider compatibility: Our app lets users adjust text size (roughly 14px to 18px). Do not lock the font size on protocol text using inline font-size styles, the CSS font shorthand with a size, or the old HTML font size tag — those lock the size and the slider won't work. Use bold, colors, borders, padding, and table structure for emphasis and layout instead, and let the app scale the text. The layout must stay clean and keep all data visible with the slider at both default and maximum (about 18px). Keep the visual design from the target image: blue header band, gray supply box, two-column indications/contraindications, the drug-vial image, and the color scheme. A clean 3 or 4 column layout where labels and values stay readable (no character-by-character shattering). If a true side-by-side layout can't survive 360px with the image, a sensible fallback (for example, image repositioned, or columns adjusted) is fine — as long as it looks intentional and clean and no data drops. Plain HTML and CSS only, using features fwfh actually supports (it has limited CSS support — no reliance on flexbox or box-shadow, etc.). The output must be a single self-contained HTML block I can paste into my system. Deliverable check: Card renders cleanly in the fwfh previewer at 360px with the font slider at default AND at max (about 18px); all dose and supply data visible; no locked/inline font sizes on body or table text. The HTML should be clean and well-structured so I can adapt it as a template for about 1000 similar cards. To apply: Briefly tell me your experience with flutter_widget_from_html specifically (not just Flutter, not just HTML). The fwfh rendering quirks are the whole challenge here — generic "I know HTML" won't cut it. If you've hit fwfh's table or column limitations before, say so.