It looks something like this:
Obviously, that's really not ideal at all. Keep reading to see how to fix it. Or just download the package now and have it work on your site automatically.
First off, you want to add some code to your package controller. You are doing everything in a package, right? ;)
The paths would be relative to your package's css and js folders. The reason that we're putting this in outside of the theme is so we fix it in the dashboard, login, and other system pages.
This is pretty straightforward, at least, I think so. First it grabs all the 'ccm-required' spans on the page. Next it adds a nonbreaking space so that it's not directly against the text of the label. Then the first label before it has the span appended. After that, the 'ccm-required-active' class is added, so that it now shows up.
There is a brief moment on page load where the * is not shown, but it doesn't affect the page layout at all.
After it's all running, you should have something that looks like this:
This is much better, and helps make your site look a lot more professional.
In the past, I've done a lot of tweaks just trying to get the css working, often making the labels display inline-block. That's not always the best fix, and doesn't always cover all cases. Some forms it actually breaks more than it fixes. I think doing it this way is much better.