Force rectangle out of div[overflow: hidden] to the right

Question

Gif: https://gyazo.com/222623a5c9c54588ed02c3423d5f2bcc

As you can see, looking at the gif, the rectangle is floated down left out of view. This is not what I want. I want it to be pushed out to the right, slowly going out of view. How should this be done?

Here is a little js fiddle prototype, so you dont have to start from scratch: https://jsfiddle.net/sebastian3495/y3nume0p/42/ ( You might want to run the code locally or somewhere else, seems like there is a problem with jquery )

What am I doing wrong?

---

css

div#main-content {
    height: 500px;
    overflow: hidden;
    border: 2px solid blue;
}

Answer 1

try using:

white-space: nowrap;

(ps - Your jsfiddle is broken so I can't check it)