JSFiddle - React, Tailwind, and code Playground

by MartijnR

HTML

<label class="box"> <span class="label">some label</span>
 <span class="hint">some hint</span>

        <input class="input" type="text" />
    </label>

CSS

.box {
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    height: 200px;
    border: 1px solid black;
}
.label{
    display: block;
    flex: none;
    background: yellow;
}
.hint {
    display: block;
    flex: none;
    background: green;
}
.input {
    box-sizing: border-box;
   
    flex: 1;
    width: 100%;
    display: block;
    background: blue;
}