JSFiddle - React, Tailwind, and code Playground

by kuonyuu

HTML

<div class="wrapper">
    <label class="left">Label Name</label>
    <div class="right">
        <input type="text" />
    </div>
</div>

<div class="wrapper" style="height: 72px;">
    <label class="left">Label Name</label>
    <div class="right">
        <textarea></textarea>
    </div>
</div>

    
<div class="wrapper">
    <label class="left">Label Name</label>
    <div class="right">
        <select name="" id="">
            <option value="">1</option>
            <option value="">22</option>
            <option value="">333</option>
        </select>
    </div>
</div>

CSS

*
{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body
{
    font-family: Arial;
    padding: 0;
    margin: 0;
}

.wrapper { position: relative; min-height: 29px; width: 400px; margin-bottom: 5px; }
.left, .right { position: absolute; border: 0; }

.left
{
    padding: 4px 0;
    background-color: #cecece;
    top: 0; bottom: 0;
    left: 0; right: 30%;
}

.right
{
    background-color: #efefef;
    top: 0; bottom: 0;
    left: 30%;
    right: 0;
}

input[type="text"], select, textarea
{
    width: 100%;
    padding: 1px 4px;
    margin-top: 4px;
    border: 1px solid #cecece;
    vertical-align: top;
}

select { padding-right: 0; } 

.right textarea { height: 100%; margin-top: 0; }