JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content">
    <form>
    
        <div class="input">
            <label>Username</label>
            <input type="text" />
        </div>
        
        <div class="input">
            <label>Password</label>
            <input type="password" />
        </div>
    
    </form>
</div>

CSS

.content {
    border: 1px solid;
    font-size: 12pt;
    padding: 15px 10px;
}
.input {
    overflow: hidden;
}
.input + .input {
    margin-top: 250px;
}
label {
    float: left;
    margin-top: 2px;
}
.input label:after {
    content: ":";
}
.input input {
    border: 1px solid;
    font-family: "Courier New", monospace;
    font-size: 10pt;
    float: right;
    padding: 2px 4px;
    width: 55%;
}