JSFiddle - React, Tailwind, and code Playground

by Oski Krawczyk

HTML

<input id="account" type="text" />

<p>
    <input id="domain" type="text" />
    <label id="suffix" for="domain">.positionly.com</label>
</p>

<div id="measure"></div>

CSS

input, body {
    font-size: 13px;
    font-family: Helvetica;
    border: solid 1px red;
    padding: 10px;
}

p {
    position: relative;
}

div {
    display: inline;
}

label {
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px 10px 10px 13px;
}

JavaScript

var account = document.id('account'),
    domain = document.id('domain'),
    measure = document.id('measure'),
    suffix = document.id('suffix');

domain.addEvents({
    keyup: function(){
                measure.set('text', this.get('value'));

    },
    keydown: function(){
                var width = measure.getSize().x;
        console.log(width);
        suffix.set('styles', {
            left: width
        });

    }
    
});