JSFiddle - React, Tailwind, and code Playground

by benhowdle89

HTML

<label for="noBox">I have no Box Sizing:</label>
<input name="noBox" type="text" id="noBox" />

<label for="box">I have Box Sizing:</label>
<input name="box" type="text" id="box" />

<!--
As you can see, you can safely apply padding to the input without it potentially breaking layout and keeping your inputs nicely uniformed
-->

CSS

input {
display: block; 
width: 350px; 
border: 1px solid red;    
margin: 10px 0;
padding: 10px;
}

#noBox {
   
}

#box {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */    
}