Using html tags in the same level as awesomplete input

[Rui90]

I'm having a problem using labels at the same level as the awesomplete input. So, this class c-awesomplete__label basically everytime the input is clicked is ready to be a floating label, so it will move to the top of the input. It is working on text-box. But it works because the input and the label are at the same level in html.

The thing is when I do:

  ngAfterViewInit() {
    this.awesomplete = new Awesomplete(this.awesompleteRef.nativeElement, this.awesompleteOptions);
  }

There is another lebel being build

<div class="awesomplete"><input></div><label/>and my css stops working. Any idea is if possible to maintain label or other html tags that I might use at the same label as the input? I tried to explicitely create a <div class="awesomplete></div> and put everything inside, but still awesomplete creates a new one.

<input
      id="{{options.elementId}}"
      #awesomplete
      class="c-awesomplete__input dropdown-input"
      [formControl]="control"
      [type]="customType"
      [label]="options.label"
      (click)="toggleDropdown()">
    <label
      class="c-awesomplete__label">
        {{options.label}} {{control.isRequired() ? '*' : ''}}
    </label>