Lineup google_translate_element inline with label in Magento 1.6.2.0

Question

In My Magento frontend page http://nilandsplace.com the Google Website Translator box drops below the label for it and below the header-container bar. I would like it to be like this

Translate This Page:

Rather then

Translate This Page:

The Dynamic code that comes from Google, in Firebug has <div> tags that I found in Firebug would line up if I changed them to <span>, but then this is after the page load and I can't figure out how to line things up before the page load. I can override the .goog-te-gadget {... with CSS but I can't find a way to override the tag. The dynamic code comes like this:

<div class="skiptranslate goog-te-gadget" dir="ltr" style="">
<div id=":0.targetLanguage" style="display: inline;">
<select class="goog-te-combo">
</div>
  Powered by
<span style="white-space:nowrap">
</div>
</span>
<script type="text/javascript">
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" type="text/javascript">
</div>

If I change it in Firebug to:

<span class="skiptranslate goog-te-gadget" style="" dir="ltr">

It all lines up, But... How do I override this that loads it?:

<span id="google_translate_element"></span><script type="text/javascript">
function googleTranslateElementInit() {new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit">
</script>

I can't seem to find a CSS to do it, but then I am just learning. I have tried putting <span> tags in the above code but could not get it to load the gadget. I have been looking at the API for this, but it is way above my skill level. I am a cheap bastard and don't want to pay for an API I don't know how to use or hire a programmer and not know how to fix it when it breaks and it is easy to break Magento. Why I am still on 1.6.2.0. Just to scared to try a new one. I depend on the kindness and grace of others to lean what I need to know!

Answer 1

Add into your CSS:

.goog-te-gadget {
float: left !important;
clear: none;
}

select.goog-te-combo {
float:left !important;
clear: none;
}

Answer 2

Use this below code :

.goog-logo-link{
    display: none !important;
}

.goog-te-gadget{
   color: transparent !important;
}
select.goog-te-combo {
  color: black;
}