JSFiddle - React, Tailwind, and code Playground

HTML

<div class="dora-input">
    <label for="input-foo">Foo</label>
    <input type="text" id="input-foo" value="bar">

    <div class="description">
        <p>Description of the input.</p>
    </div>
</div>

SCSS

.dora-input,
input {
    font-family: Arial, Helvetica, Geneva, sans-serif;
    font-size: 14px;
    line-height: 20px;
}

.dora-input {
    background: #eee; color: #000; overflow: hidden; padding: 10px; width: 410px;
    
    input,
    label { display: block; }
    
    p {
        margin: 0;
    }
    
    input {
        width: 220px; outline: none; box-sizing: border-box; border: 1px solid #ccc; margin: 0; padding: 9px 10px;
    }
    
    label {
        width: 160px; float: left; font-weight: 500; height: 40px; line-height: 40px; margin: 0 10px 0 0; padding: 0 10px; cursor: pointer; background: #ccc;
    }
    
    .description { background: #F6E69F; padding: 10px; margin: 10px 0 0 0; }
}