Different displaying of input inside span in Chrome and FF
<p>I have input inside span and some HTML-code.</p>

<pre><code>&lt;div class="SCnField"&gt;
&lt;div class="SCnFieldMarker"&gt;
    ⇒
&lt;/div&gt;
&lt;div class="SCnFieldValue"&gt;
    &lt;span class="scAttribute selectedSCnNode"&gt;
        &lt;span class="twitter-typeahead" style="position: relative; display: inline-block;"&gt;
            &lt;input type="text" data-name="true" class="typeahead scn-input tt-hint"
                   disabled="" autocomplete="off"
                   spellcheck="false"
                   style="position: absolute; top: 0px; left: 0px; border-color: transparent; box-shadow: none;"&gt;
            &lt;input type="text" data-name="true" class="typeahead scn-input tt-input" autocomplete="off"
                   spellcheck="true" dir="auto"
                   style="position: relative; vertical-align: top; background-color: transparent;"&gt;
            &lt;pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: nowrap;"&gt;&lt;/pre&gt;
            &lt;span class="tt-dropdown-menu"
                  style="position: absolute; top: 100%; left: 0px; z-index: 100; display: none;"&gt;
            &lt;div class="tt-dataset-idtf"&gt;

            &lt;/div&gt;
        &lt;/span&gt;
        &lt;/span&gt;
        &lt;div class="atrribute-colon"&gt;:&lt;/div&gt;
    &lt;/span&gt;
&lt;/div&gt;
</code></pre>

<p></p>

<p>Fiddle with styles: <a href="https://jsfiddle.net/bq7Lsw2L/" rel="nofollow noreferrer">https://jsfiddle.net/bq7Lsw2L/</a></p>

<p>Difference in FF and Chrome display:</p>

<p><img src="https://i.stack.imgur.com/24sV5.png" alt="FF vs. Chrome"></p>

<p>I experimened with vertical-align, display, margins, paddings and so on... But there are no results
How can I fix vertical align in FF?
Thanks.</p>