JSFiddle - React, Tailwind, and code Playground

by frapporti

HTML

<div class="row">
        <input type="text" />
    </div>
    <div class="row">
        <span class="leftText">Text</span>
        <input type="text" />
    </div>

<!-- some other examples -->
    <div class="row">
        <input type="text" />
    </div>
    <div class="row">
        <span class="leftText">txt</span>
        <input type="text" />
    </div>
    <div class="row">
        <input type="text" />
    </div>
    <div class="row">
        <span class="leftText">Middle</span>
        <input type="text" />
    </div>
    <div class="row">
        <input type="text" />
    </div>
    <div class="row">
        <span class="leftText">CSS<3</span>
        <input type="text" />
    </div>
    <div class="row">
        <input type="text" />
    </div>
    <div class="row">
        <span class="leftText">Short</span>
        <input type="text" />
    </div>
    <div class="row">
        <input type="text" />
    </div>
    <div class="row">
        <span class="leftText">Average text</span>
        <input type="text" />
    </div>

CSS

* { margin: 0; padding: 0 }

.row { 
    display: -webkit-flex;
    width: 300px; /* or whatever else */
}

.row:nth-of-type(2n) { margin-bottom: 20px }

input {
  width: 100%;
}

span + input {
    margin-left: 10px;
    -webkit-flex-grow: 2;
    -webkit-flex-basis: 100px;
}

span {
    display: -inline-flex;
    -webkit-flex-grow: 0;
}