JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div class='div-table'>
        <div class='div-table-row'>
            <div class='div-table-cell nostretch'>foobar:</div>
            <div class='div-table-cell'>
                <input type="text" value="foobar" />
            </div>
        </div>
    </div>
</div>

CSS

#container {
    background: #ccc;
    width: 640px;
    min-height: 400px;
    margin: 0 auto;
    padding: 10px;
}

.div-table {
  width:100%;
  display: table;
  border-collapse: collapse;
}

.div-table .div-table-row {
  display: table-row;
}

.div-table .div-table-cell {
  display: table-cell;
}

.nostretch {
  width:1%;
  white-space:nowrap;
}

input {
    width: 100%;
}