title: How can I prevent Google Translate from changing the html structure of my page?
body: <p>Google Translate seems to be changing my html, moving my asterisk to a new line.</p>
  
  <p>Here is a live example: <a href="http://jsbin.com/niwukoniji/1/edit?html,css,output" rel="nofollow noreferrer">jsbin</a></p>
  
  <p>How can I avoid this?</p>
  
  <p><strong>Before Translating:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/zZO0f.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zZO0f.png" alt="enter image description here"></a></p>
  
  <p><strong>After Translating to Spanish:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/UqPso.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UqPso.png" alt="enter image description here"></a></p>
  
  <p>JS:</p>
  
  <pre><code>function googleTranslateElementInit() {
    new google.translate.TranslateElement({
      pageLanguage: 'en',
      layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
      autoDisplay: false
    }, 'google_translate_element');
  }
  </code></pre>
  
  <p>Css:</p>
  
  <pre><code>.box_content-form-data {
    clear: both;
    float: left;
  }
  </code></pre>
  
  <p>Html:</p>
  
  <pre><code>&lt;div id="google_translate_element"&gt;&lt;/div&gt;
  &lt;span style="clear:both; float:left;"&gt;Enter your email account.&lt;/span&gt;
  &lt;span class="box_content-form-data"&gt;
            &lt;label&gt;Email Address:
                &lt;span style="color:red;"&gt;*&lt;/span&gt;
  &lt;/label&gt;
  &lt;/span&gt;
  </code></pre>