JSFiddle - React, Tailwind, and code Playground

HTML

<h3>默认input</h3>
	<input>
	<br clear='both'>
	<h3>input 100%</h3>
	<div class="navbar-form pull-left"><input type="text" class="text input"></div>
	<br clear='both'>
        <h3>input 100% + text</h3>
	<div class="navbar-form pull-left"><input type="text" class="text input">文字文字文字文字</div>
	<br clear='both'>
     <h3>input auto + text</h3>
	<div class="navbar-form pull-left"><input type="text" class="text input" style="width:auto">文字文字文字文字</div>
	<br clear='both'>
	<h3>input 50px</h3>
	<div class="navbar-form pull-left"><input type="text" class="input"></div>

CSS

input{
		-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
		border:1px solid #999;
		padding: 0;margin:0;
	}
		.pull-left {
float: left;
}
.navbar-form {
margin-top: 6px;
margin-bottom: 6px;
}
		input.text{
			width: 100%;
		}
		.input{
			width:50px;
		}