'Need help in placing label immediately after text

I am trying to place a label WIP (work in progress) immediately after text inside a disabled input box. I have tried few css configs but unable to achieve desired result.

Getting any help me really good for me.

Current code:

label.label-class {
    font-size: 12px;
    letter-spacing: 0.3px;
    position: absolute;
    left: 160px;
    bottom: 13px;
  }


<div class="myclass">
    <mat-form-field class="form-input" appearance="outline">
        <mat-label>MyLabel</mat-label>
        <input matInput [disabled]="true" [ngModel]="getName()" />
        <label class="label-class"> WIP </label>
    </mat-form-field>
</div>

Here is how it is appearing right now:

enter image description here

javascripthtmlcssangularfrontend


Solution 1:[1]

I'm unsure if I understood you correctly; If you want to have the WIP label after the input, can't you just move the label outside of mat-form-field? If that doesn't work, can you move the label outside of the div?

label.label-class {
    font-size: 12px;
    letter-spacing: 0.3px;
    position: absolute;
    left: 160px;
    bottom: 13px;
  }
<div class="myclass">
    <mat-form-field class="form-input" appearance="outline">
        <mat-label>MyLabel</mat-label>
        <input matInput [disabled]="true" [ngModel]="getName()" />
    </mat-form-field>
    <label class="label-class"> WIP </label>
</div>

Solution 2:[2]

Can you please try this

.form-input {
  position: relative;
  height: 100%;
}

.label-class{
  position: absolute;
  right: 0;
}

If you want them next to each other

.form-input {
  display:flex;
  flex-direction: row;
}

Solution 3:[3]

Thw ::after selector solves this issue.

p::after { 
  content: " - Remember this";
}
<h1>Demo of the ::after selector</h1>

<p>My name is Donald</p>
<p>I live in Ducksburg</p>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Rani Giterman
Solution 2
Solution 3 brezanac

Related Questions