JSFiddle - React, Tailwind, and code Playground

by thirtydot

HTML

<div class="formLine">
    <button>click me</button>
    <label>some text..</label>
    <span><input type="text" /></span>
</div>

<hr />

<div class="formLine">
    <button>click meeeeeeeeee!</button>
    <label>some more text..</label>
    <span><input type="text" /></span>
</div>

CSS

.formLine {
    overflow: hidden;
    background: #ccc;
}
.formLine input {
    width: 100%;
}
.formLine label {
    float: left;
}
.formLine span {
    display: block;
    overflow: hidden;
    padding: 0 5px;
}
.formLine button {
    float: right;
}
.formLine input, .formLine button { 
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}