JSFiddle - React, Tailwind, and code Playground

HTML

<form name="foo" action="#">
    <div class="bb">div</div>
    <input class="bb" size="20" name="bar" value="field">
  </form>

CSS

form {display:block; margin:0; padding:0; width:50%; border:1px solid green; overflow:visible}
	div, input {display:block; border:1px solid red; padding:5px; width:auto; font:normal 12px Arial}
	
	/* The voodoo starts here */
	.bb {
		box-sizing: border-box; /* css3 rec */
		behavior: url("boxsizing.htc"); /* ie6/7 */
		-ms-box-sizing: border-box; /* ie8 */
		-moz-box-sizing: border-box; /* ff2+ */
		-webkit-box-sizing: border-box; /* safari3+ */
		-khtml-box-sizing: border-box; /* konqueror */
	}