Simple jQuery problems

Simple jQuery problems

Hi,

I've got a really simple problem, I have some text with class elements in the middle, like this:

<p>I'm a <span class="lumberjack">lumberjack</span><span class="teacosy">teacosy</span> and I'm OK.</p>

But If I try to use jQuery's show and hide features on the two class elements above, they do show and hide properly, but don't exist as a single line of text anymore and the elements are moved to a separate line in the middle.

Here's what I'm doing with jQuery:
<script language="javascript">
      $(document).ready(function() {
      $('.teacosy').hide();

        $('a#lumberjack').click(function() {
          $('.lumberjack').toggle(400);
          $('.teacosy').toggle(400);
          return false;
       });

        $('a#teacosy').click(function() {
          $('.lumberjack').toggle(400);
          $('.teacosy').toggle(400);
          return false;
       });
      });
</script>

This is my first experiment with jQuery, and I can't seem to find anyone else having the same problems as me... what am I doing wrong?