JSFiddle - React, Tailwind, and code Playground

HTML

<div><div><input /></div></div>
--------------------------------<br />
    Red: 80%<br />
    Black: 20%<br />
    As you can see the input is going 20px into the black :/

CSS

div {
    background-color: #aqua;
}

div > div {
    background-color: #f00;
    width: 80%;
    padding-bottom: 5px;
}

input {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 5px 20px;
    width: 100%;
}