JavaScript Element aus einem Element entfernen

[PEASANT KING]

Die Überschrift klingt komisch ich weiß.
Ich habe folgendes Problem, ich nutze in meiner Laravel Anwendung DataTables das klappt auch wunderbar.
Was mich nun aber stört ist, ich nutze auch Bootstrap 4 und habe komischerweise das Problem das mein Filter Element das so aufgebaut wird von DataTables:

<div id="bla" class="dataTables_filter">
     <label>
          <i class="fa fa-search"></i>
          <input class="form-control form-control-sm" placeholder="Suche..." aria-controls="spottings" type="search">
     </label>
</div>

Hier ist das Problem komischerweise, das ich da ich das I Element manuell per DOM hinzufüge, das Element über dem Input Element liegt.
Ich möchte das Ganze links neben dem Input Element haben. Das Problem liegt an der Klasse ".form-control" von Bootstrap 4 genauer an den Styles "width" und "display" welches auf block gesetzt ist.

Was mich wundert in den Demos auf datatables.net ist das Problem nicht vorhanden. Ich habe schon etliche Versuche per jquery, css ausprobiert.

Woran liegt das?

Wichtig für mich ich möchte am liebsten das Label Element entfernen und meine eigene Struktur schaffen. Ich möchte die Klasse .form-control nicht entfernen, das funktioniert sondern das css ändern allerdings nur für mein spezifisches Input Element.

Hat sich erledigt ich habe im css einfach einen Buchstaben vergessen ooohhh man....

 

[SoapWater]

Probier mal den Zeilenumbruch zwischen den Zeilen zu entfernen. Das hat mir manchmal schon einige Nerven gekostet.

:

<div id="bla" class="dataTables_filter">
     <label>
          <i class="fa fa-search"></i><input class="form-control form-control-sm" placeholder="Suche..." aria-controls="spottings" type="search">
     </label>
</div>

 

[PEASANT KING]

Ich habe es gelöst indem ich einfach noch mal über mein CSS gegangen bin und entdeckt habe, das dort ein "s" fehlte in einer Bezeichnung. Danach haben meine Overrides gegriffen.