禁止移动html元素

Question

please check out this page.
Check Out
As you can see i tried to add a live preview. I used jQuery html() to add elements to webpage. But when anyone click on generate button the elements moves a little upward to add a new elements 'live preview'.Is there any way to remove this moving?
Sorry for bad English(;

    <input id="url" type="text" value="http://"/><br/>
    <button id="btn">Generate</button><br/>  
<div id="opt">
&nbps;
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"         type="text/javascript" ></script>
    <script type="text/javascript">
        $("#btn").click(function ()
 {
$("#opt").html ("Live Preview");
});
</script>

something like this. Also why the Live Preview text having large padding from above element.

Answer 1

Remove the none breaking space   from <div class="error">&nbsp;</div>

Or you can just move the errors div below. Like this:

<div class="center">
    <br>
    <input id="url" type="text" value="http://"><br>
    <button id="btn">Generate</button><br>
    <input type="text" id="opt" placeholder="Generated Code will be here!">
<div class="error">&nbsp;</div>
</div>

Answer 2

You have used   for padding in <div class="error">

It is removed by the jquery command $(".error").text(""); when the button is pressed. Either remove the   in the original code (space will never exist), or change the jquery command to add it after the button is pressed (space will always exist).