clearable input overwrite label padding

Question

Try to make input with close-icon button,<input type=search> but I need more styling so I decided to make it on my own,but the problem is the position of input and label also moved slightly when want to clear input.

form.component.html

<div class="flex-center ">
  <input class="input" [(ngModel)]="value">
  <button *ngIf="value" class="button-close" (click)="value=''">
  </button>
  <label class="desc">description</label>
</div>

form.component.css

.flex-center {
 display: flex;
 align-items: center;
 justify-content: center;
 }

.desc {
 padding-left: 16px;
 }

.button-close {
 margin-left: -5%;
 }

this is what I had tried so far, clereable input demo. need advice how to solve this,

Answer 1

The problem is that the button does not exist when the input is empty and when some text is entered, the button is inserted into the DOM taking some space which makes the label move. One way of putting the button on a different layer is to use position: absolute on an element.

Try something like this:

clearable-input.component.html

<div class="input-wrapper">
  <input class="input" [(ngModel)]="value">
  <button *ngIf="value" class="button-close" (click)="value=''">X</button>
</div>
<label>Description</label>

clearable-input.component.ts

.input-wrapper {
  position: relative;
  display: inline-block;
}

button {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  border: none;
  background-color: transparent;
}

label {
  margin-left: 15px;
}

Working demo