Why is the text on 3 different lines?

Why is the text on 3 different lines?

That's because the leading, middle and tailing part are in a different div. By default, each div will take 100% of the available width. You can change this by putting something like this in the css file of your template:

div.ulti_counter_leading {
width: 20%;
float:left;
}
div.ulti_counter_middle {
width: 60%;
float:left;
}
div.ulti_counter_tailing {
width: 20%;
float: left;
}

The width parameters will define how much of the available width the divs can take. You can also use a fixed size in pixels. The float:left parameter allows the next div to be put next to the previous one (if there is enough space).

Note that this will only look good if you want to put everything on one line. If the text is spread over 2 lines, this will create an odd effect.