Resize iframe & textarea in reverse directions I have a textarea and iframe whose sizes should change dynamically and in reverse directions. I'd like to achive this effect without using a frameset or jQuery plugin. Here's the result of my attempt:

&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Resize&lt;/title&gt;
    &lt;style&gt;
        textarea,
        iframe {
            display: block;
            width: 300px;
            height: 200px;
            margin: 0;
            border: 0;
            padding: 0;
        }
        textarea {
            background: green;
            resize: none;
        }
        iframe {
            background: blue;
        }
    &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;input id="slide" oninput="resize();" onchange="resize();" type="range" min="0" max="400" value="200"&gt;
    &lt;textarea id="textarea"&gt;&lt;/textarea&gt;
    &lt;iframe id="iframe"&gt;&lt;/iframe&gt;
    &lt;script&gt;
        var slide = document.getElementById("slide");
        var textarea = document.getElementById("textarea");
        var iframe = document.getElementById("iframe");

        function resize() {
            var slideValue = slide.value;
            textarea.style.height = slideValue + "px";
            iframe.style.height = 400 - slideValue + "px";
        }
    &lt;/script&gt;
&lt;/body&gt;

&lt;/html&gt;


Demo 

I wonder if you could review my code and let me know what you think.
Perhaps add overflow:hidden; to the CSS of the textarea and iframe, and add scrolling="no" as an attribute of the HTML iframe element: because otherwise, a scrollbar will appear when the slider is very big or very small.

Maybe a scrollbar is what you want (for usability); but a scrollbar makes a small visual artifact in an empty textbox or iframe, when the element is shorter than one line.