JSFiddle - React, Tailwind, and code Playground

HTML

<p class="fline">
<label>mon label :</label>
<span class="field"><input type="text"></span>
</p>

<p class="fline">
<label>mon laqdqs,d nq dnqsdnl kqbel :</label>
<span class="field"><input type="text"></span>
</p>
<p class="fline">
<label>mon label whessssss :</label>
<span class="field"><input type="text"></span>
</p>
<p class="fline">
<label style="width:230px">mon label whessssss :</label>
<span class="field"><input type="text"></span>
</p>
<p class="fline">
<input type="button" value="foo bar" class="btnright">
<span class="field"><input type="text"></span>
</p>

CSS

.fline:after {
content:"";
    display:table;
    clear:both;
}

.fline {
    margin:5px 0;
}

.fline label {
    float:left;
    margin-right:10px;
}

.fline .field { /* soit un overflow:hidden; soit un context de formatage like */
    /* overflow:hidden */
    display:table-cell;
    width:10000px;
}

.fline .field input {
    width:100%;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
input {
    border:1px solid black;
    padding:2px 5px;
}

    /** pour IE 6 et 7 */
.fline {
    zoom:1;
}

.fline .field {
    /** remise en place des propriete et application du haslayout */
    *display:block;
    *width:auto;
    *zoom:1;
    /* comme on n'a pas ne border-box, on met une marge à droite sur le span qui correspondra à padding-left+padding-right+border-left+border-right de l'input */
    *padding-right:12px;
}

.fline .field input {
    *margin-right: -12px;
}

.btnright {
    float:right;
    margin-left:10px;
}