JSFiddle - React, Tailwind, and code Playground

by karthick6891

HTML

<!-- box sizing -->
<div id="page-wrap">

		<label>The &lt;textarea&gt; below is 100% wide and has a border and padding</label>
		<textarea id="problem" rows="10" cols="10">What they say is true</textarea>

		<label>This is a lame attempt at fixing it with a less percentage width</label>
		<textarea id="bad" rows="10" cols="10">What they say is true</textarea>

		<label>This is the solution, the padding and border go inside the box</label>
		<textarea id="solution" rows="10" cols="10">What they say is true</textarea>

	</div>

CSS

* { margin: 0; padding: 0; }
body { font: 14px Georgia, serif; background: #ccc; }

article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }

#page-wrap { width: 50%; padding: 70px 20px; background: white; margin: 0 auto; }

label { margin: 0 0 5px 0; display: block; }

textarea { margin-bottom: 50px; }

	textarea { width: 100%; padding: 10px; border: 3px solid #999; }
		#bad { width: 94% }
#solution {
		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
		-moz-box-sizing: border-box;    /* Firefox, other Gecko */
		box-sizing: border-box;         /* IE 8+ */
	}