Get a flash object to be next to an input field

I am having trouble with getting two elements lined up properly.

Here is my HTML:

<input class='pretty-border' id='shareinput' value='afdsdasfdasfadsff' />
<span>
    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
            width="14"
            height="14"
            id="clippy" >
        <param name="movie" value="/clippy.swf"/>
        <param name="allowScriptAccess" value="always" />
        <param name="quality" value="high" />
        <param name="scale" value="noscale" />
        <param NAME="FlashVars" value="id=clip_text">
        <param name="bgcolor" value="#F开发者_如何学PythonFFFFF">
        <embed src="/clippy.swf"
               width="14"
               height="14"
               name="clippy"
               quality="high"
               allowScriptAccess="always"
               type="application/x-shockwave-flash"
               pluginspage="http://www.macromedia.com/go/getflashplayer"
               FlashVars="id=clip_text"
               bgcolor="#FFFFFF"
        />
    </object>
</span>

And this is my CSS:

input.pretty-border {
  float:left;
  font-size:1em;
  width: 300px;
  padding: 5px 10px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  border: 4px solid #c9deff;
}

Unfortunately, there is a line break between the objects as can be seen in the attached picture. How can I get rid of it?

try giving both elements the same class name then put the float:left for that class, not just the input element.

.sameclass {                
     float:left;                
 }

setting display:inline on the object seems to work (tested in Chrome & FF)

span object {display:inline;}