JSFiddle - React, Tailwind, and code Playground

HTML

<div id="outer">
   <div id="inner">
       How can I truly hide the text beyond the margin?<br />
       The solution still allows for long inner things<br />
       <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/28/120331-G-ZZ999-556-Adrift_fishing_vessel_from_2011_Fukoshima_tsunami.JPG/800px-120331-G-ZZ999-556-Adrift_fishing_vessel_from_2011_Fukoshima_tsunami.JPG" alt="Thank you wikimedia commons"/>
    </div>
</div>

<p>Currently the user can select a word and drag sideways to reveal all the text beyond the margin.</p>

<p>I would like to prevent that. I don't have control over the fact there are two divs or their widths, but I can control the CSS styles applied to them.</p>
    
<p>I need a kind of <i>overflow-x: hidden-and-undraggable</i> style.</p>

CSS

#outer { 
    width: 150px; 
    height: 300px;
    overflow-x: hidden;
    border: 1px solid black;
}
#inner { 
    overflow: hidden;
    width: 100%;
}