Put small text to the right of an input field

Question

I'm meant to have an input field meant to be disabled on page load until a small text of "Edit" next to the input field is clicked enabling it. I can't for the life of me figure out how to place this text where it's meant to. I haven't yet added the disabled/enabled functionality but that's straight forward.

My code is pretty basic as of right now. Mtop-8 merely sets the margin top to 8px.

<div class="mtop-8">
<input placeholder="Code" [(ngModel)]="typedCode" />
<a style="margin-top: auto"> Edit </a>
</div>

I've attempted using a but that places it slightly below the input field. I'm required to have it in line with the bottom of this field slight to the right of it. I've also attempted to margin-top: auto, text-align: left, and other css styling to try and push it down to it's placement but to no avail.

Answer 1

Use flexbox to make content stack horizontally rather than vertically, then set the align-items property to center to make sure all content inside the div will center itself on the Y axis. Also I recommend applying some margin to the element.

    document.getElementById("editLabel").addEventListener("click", function() {
        let input = document.getElementById("codeInput");
        let label = document.getElementById("editLabel");
        if (input.disabled) {
            input.disabled = false;
            label.innerHTML = "Stop Editing";
        } else {
            input.disabled = true;
            label.innerHTML = "Edit";
        }
    });

    .mtop-8 {
        margin-top: 8px;
        display: flex;
        align-items: center;
    }
    .mtop-8 a {
        /* Add a little spacing in between the input and text */
        margin-left: 4px;
    }

    <div class="mtop-8">
        <input id="codeInput" placeholder="Code" [(ngModel)]="typedCode" disabled/>
        <a id="editLabel">Edit</a>
    </div>