JSFiddle - React, Tailwind, and code Playground

by Tom Randolph

HTML

<div class="wrap">
    <label>Thing:&nbsp;</label>
    <input />
</div>
<div class="wrap">
    <label>Thing:&nbsp;</label>
    <span>
        <input />
    </span>
</div>

SCSS

.wrap{
    display: flex;
    
    > label,
    > input,
    > span{
        flex: 1;
    }
}

label{
    line-height: 3rem;
    text-align: right;
}

input{
    border: 0;
    background-color: #CCCCCC;
    padding: 1rem 1.5rem;
    
    width: 100%;
}