I have a program that's supposed to be a race between four "animals", which in this case are represented by square divs. However, when I add an animal, it is randomly positioned because of this function:

 var animal = new animalMakerFunction(
        $("body").height() * Math.random(),
        $("body").width() * Math.random(),
        Math.random() * 1000
    );

This is the parent class, the Animal class.

var Animal = function(top, left, timeBetweenSteps) {
this.$node = $('<span class="animal"></span>');
this.top = top;
this.left = left;
this.timeBetweenSteps = timeBetweenSteps;
this.step();
this.setPosition(this.top, this.left);
};

Animal.prototype.step = function() {
setTimeout(this.step.bind(this), this.timeBetweenSteps);
};

Animal.prototype.setPosition = function(top, left) {
this.position = {
    top: top,
    left: left
};
this.$node.css(this.position);
};

This is one class that inherits from the animal class

var Caracal = function(top, left, timeBetweenSteps) {
Animal.call(this, top, left, timeBetweenSteps);
};

Caracal.prototype = Object.create(Animal.prototype);

Caracal.prototype.constructor = Caracal;

Caracal.prototype.step = function() {
Animal.prototype.step.call(this);
this.$node.css("background-color", "purple")

};

So how would I align the animals(divs) vertically(in different rows) on the click of a button?