JSFiddle - React, Tailwind, and code Playground

HTML

<p><<
    <br><< Expand/contract this "Result" window to trigger the event.
    <br><<
</p>

    <div><b>THIS IS YOUR 100%-WIDTH-FLUID-WEB-PAGE..<br>Your web content doesn't always print like it looks on the screen...</b><strong>@media queries can help ease your suffering.<br>Have a say in your printing!</strong></div>

<p>To help insure this effect would be seen in smaller monitor windows, I reduced the "page" size to 4.25in (half of a standard letter).</p>
<p>In a legitimate printable view/page, you would want to set the @media to "screen and (max-width:8.5in)"...or whatever your target paper size.</p>

CSS

body { font: 12px/1.3 Georgia, serif; }
div { border:1px dotted gray; margin:1em 0; padding:4px; }
strong { display:none; }
p { font-size:0.9em; font-style:italic; color:#333; margin-bottom:1em; max-width:90%; }

@media screen and (max-width:4.25in) {
/* resize your window until the event is triggered */
html { width:4.25in; }
/* roughly a 12px font size for demo */
body { font: 9pt/1.5 Arial, sans-serif; }
div { border:2px solid green; color:green; width:5in; }
b { display:none; }
strong { display:inline; font-style:italic; font-weight:bold; }
}