Onglets dans un formulaire

Bonjour,

J'essaie de modifier les champs d'un formulaire selon l'onglet sélectionné par l'utilisateur mais le résultat actuel a des soucis de mise en page.
La page complète est disponible sur codepen pour que vous puissiez tester précisément le rendu et voir le code dans son intégralité.

Le formulaire comporte 2 possibilités d'envoi pour une recherche dans une base de données :
- un textarea
- un upload de fichier
A ces deux possibilités s'ajoutent un même bouton de menu déroulant permettant de limiter la recherche à une sous-base et un bouton pour valider le formulaire.

Je voudrais que 2 onglets permettent de sélectionner chacun l'une des possibilités de recherche présentée précédemment.

Voici le code simplifié du formulaire :

<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#normal">Recherche standard</a></li>
    <li><a data-toggle="tab" href="#file">Recherche par fichier</a></li>
</ul>

<div class="tab-content">
    <p></p>
    <form method="post" action="http://example.com" enctype="multipart/form-data">
        <div class="input-group">
            <div id="normal" class="tab-pane fade in active">
                <p>Entrer des mails, des noms de domaine ou des noms d'utilisateur séparés par un saut de ligne :</p>
                <textarea class="form-control" placeholder="Mots-clés" name="search" id="search-area"></textarea>
            </div>
            <div id="file" class="tab-pane fade">
                <p>Uploader un fichier contenant les données à rechercher : </p>
                <input id="fileupload" type="file" name="file">
            </div>
            <span class="input-group-btn">
                <button type="button" id="leak-drop">Tous<span class="caret"></span></button>
                <ul class="dropdown-menu" id="leak-list">
                    <li><a href="#" id="leak-all"><b>Tous</b></a></li>
                </ul>
                <button class="btn btn-default" type="submit">Chercher</button>
            </span>
        </div>
    </form>
</div>

Actuellement, seul le champ souhaité apparaît mais le bouton d'import de fichier est très nettement en dessous du champ de saisi de texte et il est toujours possible de cliquer sur les éléments cachés lorsque l'autre onglet est sélectionné...
J'aimerai donc que les éléments sélectionnés par l'onglet s'affichent tous deux au même endroit.

Merci d'avance