Well no, now it wouldn't work. You have added a <dir> tag around your text which is also a block-level element (as opposed to an inline element). In addition, you have a <br /> tag in the mix now, too. These are both going to cause your small text to be on a separate line from the rest of the text. You would have to remove the <br /> tag and give the <dir> tag a style of
. Then, you'll notice the default padding that a <dir> tag carries with it which would cause your small text to be pushed off to the right rather than sitting right next to the big text. You will need to adjust for that, too if you intend to use the <dir> tag (which you shouldn't do, but techincally you can if you really want to).
But in general you are going to have a hard time wrestling your CSS into submission when you have invalid HTML markup:
Currently there are 352 errors and 88 warnings. That's not as bad as it sounds, though. A lot of those listed errors are duplicate errors with the same piece of code. But taken as a whole, those errors are going to cause problems with your layout.
If you're serious about fixing the layout then let's start right there. It won't be hard to do but you will have to pay attention to what you are doing. Take a look at the validator results I linked to and start fixing those items one-by-one. Post any specific items you aren't able to figure out how to fix. Once the HTML is clean we can fine-tune the CSS.
Otherwise, you'll just be wasting a lot of time trying to get things to play nicely.